datatables之多个自定义过滤

1. 做后台管理刚好用到了dt, 需求: 是对表格数据做时间段的范围搜索

<script type="text/javascript">
   jQuery(document).ready(function (){
   // 设置可选最大日期
   var dateObj = new Date();
   var year = dateObj.getFullYear();
   var month = dateObj.getMonth()+1;
   var day = dateObj.getDate();
 if(month<10){
   month = '0' + month;
 }
 if(day<10){
    day = '0' + day;
 }
 var curDate = year + '-' + month + '-'+ day;
 jQuery('#start-date').attr('max', curDate); //设置可以选择的最大日期不能大于当天日期
 jQuery('#end-date').attr('max', curDate);
 jQuery('#person-start-date').attr('max', curDate);
 jQuery('#person-end-date').attr('max', curDate);
 //dt开始
 var table = jQuery('#table_id_info').DataTable({
   // dom:"lrtip", // 隐藏掉自己的搜索框
   // searching:false,
   // serverSide:true,
   // processing:true,
 language: {
       url: 'xxx'
 },
 ajax: {
   type:'POST',
   url: "<?php echo admin_url( 'admin-ajax.php' );?>",
   dataSrc:'items.data',
 data: {
   action:'get_reward_data_log',
 },
   // success:function(res){
       // console.log(res); 看数据 关掉之后 数据才会遍历下来
   //  }
 },
 // 这里为表格绑定数据
 "columns": [
   { data : 'id'},
   { data : 'staff_display_name'},
   { data : 'staff_wx_headimg',
      // 对返回的数据做处理
       render:function( data, type, full, meta ){
         return '![](' +data + ')<span>' + '</span>';
       }
   },
   { data : 'staff_realname'},
   { data : 'staff_store_name'},
   { data : 'customer_wx_nickname'},
   { data : 'reward'},
   { data : 'create_date'}
   ]
 });
  //这个顺序很重要
   jQuery('#start-date,#end-date').change(function() {   // 1点击事件
    //如果想加入第三方的input搜索 搜索的值可以获取到 从这里发到后台
    //https://datatables.net/reference/event/preXhr
    table
        .on('preXhr.dt', function ( e, settings, data ) {
            data.ctime = jQuery('#start-date').val();
            data.etime = jQuery('#end-date').val();
        })
    //=====================================================
     jQuery.fn.dataTable.ext.search.push(              // 2 自定义排序
         function( settings, data, dataIndex ) {
         // console.log( data )
         //  注意这几个参数 格式 一定要打印一下  日期的格式一致才可以
         var start = new Date( jQuery("#start-date").val().replace(/-/g,"/") ).setHours(0,0,0,0); // 15000000000000000
         var end = new Date( jQuery("#end-date").val().replace(/-/g,"/") ).setHours(0,0,0,0); // 1500000000000000
         var ymd = data[7].replace(/-/g,"/").substr(0,10);
         var search = new Date( ymd );
        //  判断可以不用动  直接换里面的参数就ok
         if ( ( isNaN (start) && isNaN (end) ) ||
         (isNaN(start) && search <= end) ||
         (search>= start && isNaN(end) ) ||
         (start <= search && search <= end ) 
         ){
            return true;
         }else{
             return false;
         }
   });
    //3 表格重绘
     table
     .draw();//按时间段筛选完重绘表格
    // 4 多次用到 第二步的时候 必须用下面的这个方法
    jQuery.fn.dataTable.ext.search.pop();
    })
 });
//   注意 1 2 3 4 的位置
 </script>