时间格式为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的更多相关文章

  1. 黄聪:Jquery+DataTables插件,如何在ajax调用服务器数据后,自动给tr添加id属性

    http://legacy.datatables.net/usage/callbacks#fnRowCallback 主要通过 fnCreatedRow 事件来实现 var table = $('#t ...

  2. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  3. jquery.dataTables插件使用例子详解

    DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> & ...

  4. jQuery DataTables插件分页允许输入页码跳转

    背景说明 项目中使用jQuery DataTables插件来实现分页表格,但是默认的分页样式不能输入页码进行跳转,在页数非常多的时候使用很不方便,最主要的还是没有达到产品部门的设计要求,所以我需要寻找 ...

  5. jQuery DataTables 插件使用笔记

    初始化 在页面中 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type=&q ...

  6. 黄聪:JQUERY的datatables插件,Date range filter时间段筛选功能

    需配合moment插件实现:http://momentjs.com/ 演示:http://live.datatables.net/zuciyawi/1/edit HTML代码 <!DOCTYPE ...

  7. 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 ...

  8. jQuery Validate 插件为表单提供了强大的验证功能

    之前项目开发中,表单校验用的jQuery Validate 插件,这个插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的 ...

  9. 使用jquery datatables插件遇到fnReloadAjax的问题

    1 官网地址:http://www.datatables.net/ 2 基本参数介绍 http://blog.csdn.net/mickey_miki/article/details/8240477 ...

随机推荐

  1. Qt启动子进程,子进程关闭时通知主进程,实现主进程对子进程的管理

    自己开发了一个股票智能分析软件,功能很强大,需要的点击下面的链接获取: https://www.cnblogs.com/bclshuai/p/11380657.html 1.需求描述  Qt主进程启动 ...

  2. seo如何发外链

    http://www.wocaoseo.com/thread-228-1-1.html 在做外链方面博主并没有什么太多的经验,做为一位seo,下面武汉seo把自己做外链的大条列出来,都是经过本身实践并 ...

  3. 做seo如何选择一个好的标题

    http://www.wocaoseo.com/thread-86-1-1.html 我们常说人要红妆马配鞍,那么对于seo来说,网站的标题也是很重要的,如何写好标题呢?只要注意以下几点就行了. 首先 ...

  4. maven文件合集

    maven项目目录结构 聚合项目的pom.xml <?xml version="1.0" encoding="UTF-8"?> <projec ...

  5. e3mall商城的归纳总结2之认识dubbo、zookeeper

    由于本项目用的是soa架构,因此必须需要两个系统之间进行通信,目前的解决办法有三种(本人认为) Webservice:效率不高基于soap协议.项目中不推荐使用. 使用restful形式的服务:htt ...

  6. php验证当前是设备是电脑端还是手机端

    <?php // 验证设备为PC还是WAP $agent = $_SERVER['HTTP_USER_AGENT']; if(strpos($agent,"comFront" ...

  7. Android开发,java开发程序员常见面试题,求100-200之间的质数,java逻辑代码

    public class aa{ public static void main (String args []){ //author:qq986945193 for (int i = 100;i&l ...

  8. java初探(1)之秒杀中的rabbitMQ

    rabbitMQ 消息队列,通过一定的通信协议,生产者和消费者在应用程序内传递通信. 主要的作用,提高负载,减耦合. 场景描述:当点击秒杀按钮的那个时刻,有很高的并发量,客户端发出请求之后,会判断库存 ...

  9. Prometheus监控神器-服务发现篇(二)

    本章节讲解服务发现与Relabelling的机制与范例. 通过服务发现的方式,我们可以在不重启Prometheus服务的情况下动态的发现需要监控的Target实例信息. 如上图所示,对于线上环境我们可 ...

  10. 1.spring boot初始化项目

    初始化spring boot项目的方式非常多,如使用Spring Tool Suite.使用IntelliJ IDEA.使用NetBeans.在start.spring.io网站中.curl命令.sp ...