jquery，Datatables插件使用，做根据【日期段】筛选数据的功能 jsp

 _{时间格式为yyyymmdd,通过转换为int类型进行比较大小}

画面：

 

jsp代码：

//日期显示控件，使用h-ui框架

<div class="text-c">日期范围：
    <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}' })"
       id="logmin" name="logmin" class="input-text Wdate"  style="width: 120px;"> -
    <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d' })"
       id="logmax" name="logmax" class="input-text Wdate" style="width: 120px;">
    <input name="" id="searchRecord" class="btn btn-success" type="button" value="搜日报" >
    <input id="userid"  type="hidden" name=employeeId value="${sessionScope.loginUser.getUserId()}" />
</div>

 

<table     class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
    <thead>
        <tr class="text-c">
            <td></td>
　　　　　　　　　.....　
            <th width="100">需要筛选的时间</th>
            <th width="80">XXX</th>
            <th width="80">XXX</th>
            <th width="80">XXX</th>
        </tr>
    </thead>
    <tbody id="tbodyId">
        <tr class="text-c">
　　　　　　　　　......
            <td>${workrecord.workDay}</td>//从后台传过来的值，可以自己填写
            <td>${workrecord.workTime}</td>
            <td>${workrecord.remark}</td>
            <td>${workrecord.createTime}</td>
        </tr>
    </tbody>
</table>

js代码：

使用

$.fn.dataTable.ext.search.push( 
function( settings, data, dataIndex ) {
});具体是什么意思，还不清楚。

 $.fn.dataTable.ext.search.push(    
        function( settings, data, dataIndex ) {
          var logmin =parseInt( document.getElementById("logmin").value.replace(/-/g,"")); //获取把格式改为跟你要筛选的数据的格式一样，并转换为int类型
          var logmax =parseInt(document.getElementById("logmax").value.replace(/-/g,""));
          var search = parseInt(data[9]);  获取列,我的是第九列，根据自己的情况来填写
          if ( ( isNaN( logmin ) && isNaN( logmax ) ) ||
                  ( isNaN( logmin ) && search<= logmax ) ||
                  ( logmin <= search   && isNaN( logmax ) ) ||
                  ( logmin <= search   && search <= logmax ) )
             {
                 return true;
             }
             return false;
         }
     );
     $(document).ready(function() {
         var table = $('.table').DataTable();

         $('#searchRecord').click( function() { //点击按钮时，触发事件，执行下面的代码
             table.draw(); //重新绘制表格，不理解的话,底部有说明的官网链接
             var info = table.page.info();
             var dataRows = info.recordsTotal; //获取有关分页的基本信息
             console.log("tbodytr=");
             console.log(info);
         } );
     } );

分页的基本信息如图console中显示为：

*这个是关于  draw（）的官方说明网址：  https://datatables.net/reference/api/draw()