- 做后台管理刚好用到了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 '<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>
