カスタムフィルタのコードをdataTables
に書きました。 From
とTo
の日付があり、これらの2つの値に基づいてテーブル内のデータがフィルタリングされます。期待どおりに動作しています。
コード: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の情報を編集するにはどうすればよいですか?
はどのようにこれは私の質問に答えるのでしょうか? –
これはデフォルトで "(フィルタリングされた58個のエントリから)"部分を削除します。それを試しましたか? –
偉大な、それは働いた.. downvote申し訳ありません、私はupvoted :) –