DataTable.js implements a filter to hide rows by index
I created this filter to compare the index of the row with the start time and end time parameters. The idea is that the start and end times match the rows in the table.
$(document).ready(function () {
var startTime = 0;
var endTime = 23;
$.fn.dataTableExt.afnFiltering.push(
function (oSettings, aData, iDataIndex) {
alert("in");
if (iDataIndex < startTime + 1)
return false;
if (iDataIndex > endTime + 1)
return false;
return true;
}
);
var table = $('#example').DataTable({
"bAutoWidth":false,
"scrollX": true,
"scrollCollapse": true,
"scrollY": $(slotValueGrid).height()*0.75,
"searching": false,
"bLengthChange": false,
"bPaginate": false,
"bInfo": false
});
new $.fn.dataTable.FixedColumns(table, {
leftColumns: 1
});
});
function displayAdvertRight() {
var e = document.getElementById("startTimeDDL");
startTime =parseInt(e.options[e.selectedIndex].value,10);
e = document.getElementById("endTimeDDL")
endTime = parseInt(e.options[e.selectedIndex].value,10);
$("#example").dataTable().api().fnDraw();
}
I tried all of the following calls to get the function to filter, but it won't work, I always get the answer that $ (...). dataTable (...). api (...). fnDraw is not a function or anything along those lines, and I looked at the section in the faq regarding dataTable and DataTable, but it doesn't solve anything.
$("#example").dataTable().api().fnDraw();
$("#example").dataTable().api().draw();
$("#example").DataTable().fnDraw();
$("#example").DataTable().draw();
I cannot figure out how to fire the filter event as I cannot call draw ()
source to share
table.draw()
doesn't work because it is defined inside the scope $(document).ready
. You must have a global variable table
, then it will be available in your function as well displayAdvertRight()
. I.e
var table;
$(document).ready(function() {
...
table = $('#example').DataTable({
...
});
I am under the impression that you have two <select>
-boxes, startTime
and endTime
, and the custom filter should filter out rowindexes ( iDataIndex
) outside of those <select>
ranges?
<select id="startTime"></select>
<select id="endTime"></select>
The custom filter can be simplified a bit:
$.fn.dataTableExt.afnFiltering.push(
function (oSettings, aData, iDataIndex) {
var startTime = parseInt($("#startTime").val()),
endTime = parseInt($("#endTime").val());
return ((iDataIndex >= startTime) && (iDataIndex <= endTime));
}
);
Then all you have to do is call table.draw()
on the <select>
change event:
$("#startTime, #endTime").on('change', function() {
table.draw();
});
demo -> http://jsfiddle.net/f09g7ssa/
source to share