datatable 自定义筛选

1.按时间段查询

　　效果图

　　可以从查询时间那里按时间查询,也可以在搜索框那里按照时间查询,只能查询你输入的日期(是单个日期),注意,输入格式要和你表格中的时间的格式一致,否则查询不到数据

　　js

createTable();//把datatable 渲染到页面,从ajax获取到数据 如果是静态页面,数据是自己写到页面上的 用 var table = $('#dtQtNaireDrafts').DataTable();
$.fn.dataTable.ext.search.push(
      function( settings, data, dataIndex ) {
          var start = new Date($('#zstart').val().replace(/-/g,"/")).setHours(0,0,0,0);
          var end = new Date($('#zend').val().replace(/-/g,"/")).setHours(0,0,0,0);
          var search = new Date(data[1].replace(/-/g,"/"));

          if ( ( isNaN (start) && isNaN (end) ) ||
              (isNaN(start) && search <= end) ||
              (search>= start && isNaN(end) ) ||
              (start <= search && search <= end ) 

        )
          {
              return true;
          }
          return false;
      }
    );
    $('#start,#zend').change(function() {
      table.draw();//按时间段筛选完重绘表格
    })

html

  <p class="searchTime">
         <span>查询日期</span>
          <input type="text" id="zstart" class="start"> -
          <input type="text" id="zend" class="end">
   </p>
  <table class="table table-striped" id="dtQtNaireDrafts">
    //静态页面把数据写到这里,后台引入数据在js中写
   </table>

 如果一个页面多个地方用到筛选,必须先把上一个 $.fn.dataTable.ext.search.push  执行 $.fn.dataTable.ext.search.pop();不然他就会还是第一次你调用的push方法,无论你调用多少次,

例子:

    $('.start,.end').change(function() {
      var id=$(this).attr('id');
      var last=id.substring(id.length-1,id.length);
      if (last=='t'|| last=='d') {
        tableDraw(3);
        table.draw();//重构表格
        $.fn.dataTable.ext.search.pop();//必须加上,取消tableDraw中的 push函数.就像表格已经有了,你必须把这个表格destory以后才可以
      }else{
        if(last=='2'){
          if ($('.divMovePerson').css('display')== 'block') {
            tableDraw(5);
            table3.draw();
            $.fn.dataTable.ext.search.pop();
          }
          if ($('.divMove').css('display') == 'block') {
            tableDraw(3);
            table2.draw();
            $.fn.dataTable.ext.search.pop();
          }
        }else if(last=='3'){
          tableDraw(7);
          table4.draw();
          $.fn.dataTable.ext.search.pop();
        }
      }
    })

把自定义筛选的都放到函数中,筛选的列可以传参数.

function tableDraw(number){
    $.fn.dataTable.ext.search.push(
      function( settings, data, dataIndex) {
          var start = new Date($('div.active .start').val().replace(/-/g,"/")).setHours(0,0,0,0);
          var end = new Date($('div.active .end').val().replace(/-/g,"/")).setHours(0,0,0,0);
          var search = new Date(data[number].replace(/-/g,"/")).setHours(0,0,0,0);
          if ( ( isNaN (start) && isNaN (end) ) ||
              (isNaN(start) && search <= end) ||
              (search>= start && isNaN(end) ) ||
              (start <= search && search <= end )

        )
          {
              return true;
          }
          return false;
      }
    );
  }

2.实现范围搜索(数值)

　　效果图

　　javaScript

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = parseInt( $('#min').val(), 10 );
        var max = parseInt( $('#max').val(), 10 );
        var age = parseFloat( data[3] ) || 0; // use data for the age column
 
        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && age <= max ) ||
             ( min <= age   && isNaN( max ) ) ||
             ( min <= age   && age <= max ) )
        {
            return true;
        }
        return false;
    }
);
 
$(document).ready(function() {
    var table = $('#example').DataTable();
 
    // Event listener to the two range filtering inputs to redraw on input
    $('#min, #max').keyup( function() {
        table.draw();
    } );
} );

html

<p>
        输入一组范围：
    </p>
    <table border="0" cellspacing="5" cellpadding="5">
        <tbody><tr>
            <td>最小年龄:</td>
            <td><input type="text" id="min" name="min"></td>
        </tr>
        <tr>
            <td>最大年龄:</td>
            <td><input type="text" id="max" name="max"></td>
        </tr>
        </tbody>
    </table>
    <!-- 表格开始 -->
 
  <table id="example" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </thead>
 
    <tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </tfoot>
 
    <tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
    </tr>
    <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
    </tr>
    <tr>
        <td>Serge Baldwin</td>
        <td>Data Coordinator</td>
        <td>Singapore</td>
        <td>64</td>
        <td>2012/04/09</td>
        <td>$138,575</td>
    </tr>
    <tr>
        <td>Zenaida Frank</td>
        <td>Software Engineer</td>
        <td>New York</td>
        <td>63</td>
        <td>2010/01/04</td>
        <td>$125,250</td>
    </tr>
    <tr>
        <td>Zorita Serrano</td>
        <td>Software Engineer</td>
        <td>San Francisco</td>
        <td>56</td>
        <td>2012/06/01</td>
        <td>$115,000</td>
    </tr>
    <tr>
        <td>Jennifer Acosta</td>
        <td>Junior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>43</td>
        <td>2013/02/01</td>
        <td>$75,650</td>
    </tr>
    <tr>
        <td>Cara Stevens</td>
        <td>Sales Assistant</td>
        <td>New York</td>
        <td>46</td>
        <td>2011/12/06</td>
        <td>$145,600</td>
    </tr>
    </tbody>
</table>