jquery,Datatables插件使用,做根据【日期段】筛选数据的功能 jsp
时间格式为yyyymmdd,通过转换为int类型进行比较大小
画面:
jsp代码:
1 //日期显示控件,使用h-ui框架
2
3 <div class="text-c">日期范围:
4 <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}' })"
5 id="logmin" name="logmin" class="input-text Wdate" style="width: 120px;"> -
6 <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d' })"
7 id="logmax" name="logmax" class="input-text Wdate" style="width: 120px;">
8 <input name="" id="searchRecord" class="btn btn-success" type="button" value="搜日报" >
9 <input id="userid" type="hidden" name=employeeId value="${sessionScope.loginUser.getUserId()}" />
10 </div>
1 <table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
2 <thead>
3 <tr class="text-c">
4 <td></td>
.....
5 <th width="100">需要筛选的时间</th>
6 <th width="80">XXX</th>
7 <th width="80">XXX</th>
8 <th width="80">XXX</th>
9 </tr>
10 </thead>
11 <tbody id="tbodyId">
12 <tr class="text-c">
......
13 <td>${workrecord.workDay}</td>//从后台传过来的值,可以自己填写
14 <td>${workrecord.workTime}</td>
15 <td>${workrecord.remark}</td>
16 <td>${workrecord.createTime}</td>
17 </tr>
18 </tbody>
19 </table>
js代码:
使用
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
});具体是什么意思,还不清楚。
1 $.fn.dataTable.ext.search.push(
2 function( settings, data, dataIndex ) {
3 var logmin =parseInt( document.getElementById("logmin").value.replace(/-/g,"")); //获取把格式改为跟你要筛选的数据的格式一样,并转换为int类型
4 var logmax =parseInt(document.getElementById("logmax").value.replace(/-/g,""));
5 var search = parseInt(data[9]); 获取列,我的是第九列,根据自己的情况来填写
6 if ( ( isNaN( logmin ) && isNaN( logmax ) ) ||
7 ( isNaN( logmin ) && search<= logmax ) ||
8 ( logmin <= search && isNaN( logmax ) ) ||
9 ( logmin <= search && search <= logmax ) )
10 {
11 return true;
12 }
13 return false;
14 }
15 );
16 $(document).ready(function() {
17 var table = $('.table').DataTable();
18
19 $('#searchRecord').click( function() { //点击按钮时,触发事件,执行下面的代码
20 table.draw(); //重新绘制表格,不理解的话,底部有说明的官网链接
21 var info = table.page.info();
22 var dataRows = info.recordsTotal; //获取有关分页的基本信息
23 console.log("tbodytr=");
24 console.log(info);
25 } );
26 } );
分页的基本信息如图console中显示为:
*这个是关于 draw()的官方说明网址: https://datatables.net/reference/api/draw()
jquery,Datatables插件使用,做根据【日期段】筛选数据的功能 jsp的更多相关文章
- 黄聪:Jquery+DataTables插件,如何在ajax调用服务器数据后,自动给tr添加id属性
http://legacy.datatables.net/usage/callbacks#fnRowCallback 主要通过 fnCreatedRow 事件来实现 var table = $('#t ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- jquery.dataTables插件使用例子详解
DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> & ...
- jQuery DataTables插件分页允许输入页码跳转
背景说明 项目中使用jQuery DataTables插件来实现分页表格,但是默认的分页样式不能输入页码进行跳转,在页数非常多的时候使用很不方便,最主要的还是没有达到产品部门的设计要求,所以我需要寻找 ...
- jQuery DataTables 插件使用笔记
初始化 在页面中 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type=&q ...
- 黄聪:JQUERY的datatables插件,Date range filter时间段筛选功能
需配合moment插件实现:http://momentjs.com/ 演示:http://live.datatables.net/zuciyawi/1/edit HTML代码 <!DOCTYPE ...
- The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)
http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open s ...
- jQuery Validate 插件为表单提供了强大的验证功能
之前项目开发中,表单校验用的jQuery Validate 插件,这个插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的 ...
- 使用jquery datatables插件遇到fnReloadAjax的问题
1 官网地址:http://www.datatables.net/ 2 基本参数介绍 http://blog.csdn.net/mickey_miki/article/details/8240477 ...
随机推荐
- Qt启动子进程,子进程关闭时通知主进程,实现主进程对子进程的管理
自己开发了一个股票智能分析软件,功能很强大,需要的点击下面的链接获取: https://www.cnblogs.com/bclshuai/p/11380657.html 1.需求描述 Qt主进程启动 ...
- seo如何发外链
http://www.wocaoseo.com/thread-228-1-1.html 在做外链方面博主并没有什么太多的经验,做为一位seo,下面武汉seo把自己做外链的大条列出来,都是经过本身实践并 ...
- 做seo如何选择一个好的标题
http://www.wocaoseo.com/thread-86-1-1.html 我们常说人要红妆马配鞍,那么对于seo来说,网站的标题也是很重要的,如何写好标题呢?只要注意以下几点就行了. 首先 ...
- maven文件合集
maven项目目录结构 聚合项目的pom.xml <?xml version="1.0" encoding="UTF-8"?> <projec ...
- e3mall商城的归纳总结2之认识dubbo、zookeeper
由于本项目用的是soa架构,因此必须需要两个系统之间进行通信,目前的解决办法有三种(本人认为) Webservice:效率不高基于soap协议.项目中不推荐使用. 使用restful形式的服务:htt ...
- php验证当前是设备是电脑端还是手机端
<?php // 验证设备为PC还是WAP $agent = $_SERVER['HTTP_USER_AGENT']; if(strpos($agent,"comFront" ...
- Android开发,java开发程序员常见面试题,求100-200之间的质数,java逻辑代码
public class aa{ public static void main (String args []){ //author:qq986945193 for (int i = 100;i&l ...
- java初探(1)之秒杀中的rabbitMQ
rabbitMQ 消息队列,通过一定的通信协议,生产者和消费者在应用程序内传递通信. 主要的作用,提高负载,减耦合. 场景描述:当点击秒杀按钮的那个时刻,有很高的并发量,客户端发出请求之后,会判断库存 ...
- Prometheus监控神器-服务发现篇(二)
本章节讲解服务发现与Relabelling的机制与范例. 通过服务发现的方式,我们可以在不重启Prometheus服务的情况下动态的发现需要监控的Target实例信息. 如上图所示,对于线上环境我们可 ...
- 1.spring boot初始化项目
初始化spring boot项目的方式非常多,如使用Spring Tool Suite.使用IntelliJ IDEA.使用NetBeans.在start.spring.io网站中.curl命令.sp ...