如何解决DataTables的日期范围选择器问题
我无法让日期范围选择器正确地过滤掉DataTables中的行,这是通过ajax完成的。
当前有创建日期选择器的函数,并单击取消并应用事件,并且当创建日期选择器dateranger()的函数位于DataTable initComplete中时,除自定义范围外,它将根本无法使用只要。输入字段也不更新,并且停留在第一个预设日期范围内。这使我认为apply事件涉及到一些事情,但是当您选择预设的日期范围时,它仍会触发该事件。
当dateranger()在initComplete之外时,当您选择新的日期范围时,输入字段会正确更新,但是开始日期和结束日期的变量未定义且传递不正确,因此表不会更改。 / p>
我还尝试将dateranger()放置在document.ready之后的其他位置,然后日期选择器不会加载。
我的同事认为这是一个竞赛条件问题,但我不知道如何让所有部分协同工作。
下面是在document.ready中调用的表的功能:
let date_max = null
let date_min = null
function fill_table(show_date=false){
let extra_params = []
if (show_date){
extra_params.push("DateStart=" + date_min)
extra_params.push("DateEnd=" + date_max)
}
$("#some_table").DataTable({
"sAjaxSource": "/data" + "?" + extra_params.join("&"),"destroy": true,"sPaginationType": "numbers","autoWidth": false,"bjQueryUI": true,"bInfo": false,"bProcessing": false,"paging": true,"bServerSide": true,"pageLength": 30,"bLengthChange": false,"columns": [
{"data": 'element_date'},{"data": 'elemebt_type'},{"data": 'element_status'},{"data": 'element_id'},],"order": [[ 0,"desc" ]],"columnDefs": [
{
"visible": false,"targets": [3]
},"initComplete": function() {
//date range picker input appending
$("#some_table_wrapper .ui .row .eight").append('<input class="square form-control filter_element d-inline ml-5" id="date-range" name="dates" aria-label="date" style="max-width:max-content; min-width:250px;">');
//date range picker builder
dateranger()
//filter dates on apply
$('#date-range').on('apply.daterangepicker',function (ev,picker) {
date_min = picker.startDate.format('MM/DD/YYYY');
date_max = picker.endDate.format('MM/DD/YYYY');
date_max = date_max.replaceAll("/","-")
date_min = date_min.replaceAll("/","-")
console.log("before filling table")
console.log(date_min)
console.log(date_max)
fill_table(show_date=true)
});
// clear dates on cancel
$('#date-range').on('cancel.daterangepicker',function(ev,picker) {
$('#date-range').val('');
fill_table(show_date=false)
});
} //end of initcomplete
})
}
有什么想法或建议吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。