1. 做后臺管理剛好用到了dt, 需求: 是對表格數(shù)據(jù)做時間段的范圍搜索

<script type="text/javascript">
   jQuery(document).ready(function (){
   // 設(shè)置可選最大日期
   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); //設(shè)置可以選擇的最大日期不能大于當(dāng)天日期
 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); 看數(shù)據(jù) 關(guān)掉之后 數(shù)據(jù)才會遍歷下來
   //  }
 },
 // 這里為表格綁定數(shù)據(jù)
 "columns": [
   { data : 'id'},
   { data : 'staff_display_name'},
   { data : 'staff_wx_headimg',
      // 對返回的數(shù)據(jù)做處理
       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搜索 搜索的值可以獲取到 從這里發(fā)到后臺
    //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 )
         //  注意這幾個參數(shù) 格式 一定要打印一下  日期的格式一致才可以
         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 );
        //  判斷可以不用動  直接換里面的參數(shù)就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>