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>