Jquery 数据表日期从/到筛选器
我想从/到获取日期列筛选器,但多次尝试都不起作用。 HTML代码:Jquery 数据表日期从/到筛选器,jquery,datatables,Jquery,Datatables,我想从/到获取日期列筛选器,但多次尝试都不起作用。 HTML代码: <p id="date_filter"> <span id="date-label-from" class="date-label">From: </span> <input class="date_range_filter date" type="text" id="start
<p id="date_filter">
<span id="date-label-from" class="date-label">From: </span>
<input class="date_range_filter date" type="text" id="startdate" />
<span id="date-label-to" class="date-label">To:</span>
<input class="date_range_filter date" type="text" id="enddate" />
</p>
<table id="data-table" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr id="filter"></tr>
<tr>
<th>Transaction ID</th>
<th>Merchant Transaction ID</th>
<th>Paysystem</th>
<th>Status</th>
<th>Response</th>
<th>Date</th>
<th>Amount</th>
<th>Currency</th>
<th>User</th>
</tr>
</thead>
发件人:
致:
事务ID
商户交易ID
薪酬体系
地位
回应
日期
数量
通货
使用者
Datatables js代码:
$(document).ready(function() {
$('#data-table').dataTable( {
"processing": true,
"serverSide": true,
"ajax": "/data",
"order": [[ 0, "desc" ]],
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
total = api
.column( 6 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( 6, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( 'th#sum_total' ).html(
pageTotal.toFixed(2)
);
},
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value="">select filter</option></select>')
.appendTo( $(column.header()) )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column.search( this.value ).draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' );
} );
} );
}
} );
} );
$(document).ready(function () {
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var min = $('#startdate').datepicker('getDate');
var max = $('#enddate').datepicker('getDate');
var startDate = new Date(data[5]);
if (min == null && max == null) return true;
if (min == null && startDate <= max) return true;
if (max == null && startDate >= min) return true;
if (startDate <= max && startDate >= min) return true;
return false;
}
);
$('#startdate').datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true, dateFormat:"dd/mm/yy" });
$('#enddate').datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true, dateFormat:"dd/mm/yy" });
var table = $('#data-table').DataTable();
// Event listener to the two range filtering inputs to redraw on input
$('#startdate, #enddate').change(function () {
table.draw();
});
});
$(文档).ready(函数(){
$(“#数据表”)。数据表({
“处理”:对,
“服务器端”:正确,
“ajax”:“/数据”,
“订单”:[[0,“说明”]],
dom:'Bfrtip',
按钮:[
“复制”、“csv”、“excel”、“pdf”、“打印”
],
“长度菜单”:[[10,25,50,-1],[10,25,50,“全部”],
“footerCallback”:函数(行、数据、开始、结束、显示){
var api=this.api(),数据;
//删除格式以获取求和的整数数据
var intVal=函数(i){
返回类型i==='string'?
i、 替换(/[\$,]/g,)*1:
i的类型=='编号'?
i:0;
};
//总页数
总计=空气污染指数
.第(6)栏
.data()
.减少(功能a、b){
返回intVal(a)+intVal(b);
}, 0 );
//本页总计
pageTotal=api
.column(6,{page:'current'})
.data()
.减少(功能a、b){
返回intVal(a)+intVal(b);
}, 0 );
//更新页脚
$('th#sum_total').html(
pageTotal.toFixed(2)
);
},
initComplete:函数(){
this.api().columns().every(函数(){
var列=此;
变量select=$(“选择过滤器”)
.appendTo($(column.header()))
.on('change',function(){
var val=$.fn.dataTable.util.escapeRegex(
$(this.val()
);
column.search(this.value.draw();
} );
column.data().unique().sort().each(函数(d,j){
select.append(“”+d+“”);
} );
} );
}
} );
} );
$(文档).ready(函数(){
$.fn.dataTable.ext.search.push(
功能(设置、数据、数据索引){
var min=$('#startdate').datepicker('getDate');
var max=$('#enddate')。日期选择器('getDate');
var startDate=新日期(数据[5]);
if(min==null&&max==null)返回true;
如果(min==null&&startDate=min)返回true;
如果(startDate=min)返回true;
返回false;
}
);
$(#startdate').datepicker({onSelect:function(){table.draw();},changeMonth:true,changeYear:true,dateFormat:“dd/mm/yy”});
$(#enddate').datepicker({onSelect:function(){table.draw();},changeMonth:true,changeYear:true,dateFormat:“dd/mm/yy”});
var table=$(“#数据表”).DataTable();
//事件侦听器到两个范围过滤输入,以便在输入时重新绘制
$(“#开始日期,#结束日期”).change(函数(){
table.draw();
});
});
该过滤器应通过日期选择器(引导)、onchange列过滤使用。
数据库中的日期格式为datetime。数据在服务器端进行处理。常规列搜索筛选按预期工作