我在dataTables
中为自定义过滤器编写了代码。它采用From
和To
日期,并根据这两个值筛选表中的数据。它正在按预期工作。
代码:https://jsfiddle.net/4w1552jp/10/
javascript code:
/*$('#data').dataTable();*/
$(function() {
$('#minDate').datepicker();
$('#maxDate').datepicker();
});
// Function for converting a mm/dd/yyyy date value into a numeric string for comparison (example 08/12/2010 becomes 20100812
/*function parseDateValue(rawDate) {
var dateArray = rawDate.split("/");
var parsedDate = dateArray[2] + dateArray[0] + dateArray[1];
return parsedDate;
}*/
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex) {
var iFini = ~~moment($('#minDate').val(), "DD/MM/YYYY").format("X");
var iFfin = ~~moment($('#maxDate').val(), "DD/MM/YYYY").format("X");
var evalDate = ~~moment(aData[4], "YYYY/MM/DD").format("X");
if (evalDate >= iFini && evalDate <= iFfin) {
return true;
} else {
return false;
}
}
);
$(document).ready(function() {
var table = $('#data').DataTable({
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
});
// Event listener to the two range filtering inputs to redraw on input
$('#minDate, #maxDate').keyup(function() {
table.draw();
});
});
全屏结果为:http://jsfiddle.net/4w1552jp/10/show/
在该页面的底部,您可以看到一个div data_info
其中包含有关数据表显示多少数据的信息......
<div id="data_info" class="dataTables_info" role="status" aria-live="polite">Showing 1 to 10 of 26 entries (filtered from 58 total entries)</div>
它现在显示如下:Showing 1 to 10 of 26 entries (filtered from 58 total entries)
我希望它显示为Showing 1 to 10 of 26 entries
,无论有多少数据日期范围过滤器过滤器(来自我的客户的奇怪请求),但过滤器应该按原样工作。如何以编程方式编辑 data-info
div 中的信息?
嗯,这是一种黑客或变通方法,但它可以满足您的需求。
将onchange
侦听器添加到该div id,并且仅使用单词(已过滤)的字符串。
在您的文档就绪函数中...
$("data_info").on("change",function(){
var oldHTML = $("data_info").html();
var newHTML = oldHTML.substring(0,oldHTML.indexOf("(filtered") - 1);
$("data_info").html(newHTML);
});
这将从字符串的开头开始,并使用索引之前的所有字符(过滤。
为了编辑,请使用 dataTable 语言扩展。在构造函数上添加此行。
"language": {
"infoFiltered": ""
},
源