DataTable.js implement a filter to hide rows by index

Question

I created this filter to compare the index of the row to starttime and endtime variables. The idea is that the values of starttime and endtime correspond to 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 have tried all the following calls to get the function to filter but it won't work, I always get a response that $(...).dataTable(...).api(...).fnDraw is not a function or something along those lines and I have looked at the section in the faq regarding the dataTable vs DataTable but it does not solve anything

$("#example").dataTable().api().fnDraw();

$("#example").dataTable().api().draw();

$("#example").DataTable().fnDraw();

$("#example").DataTable().draw();

I cant figure out how to get the filter event to fire since I can't seem to call draw()

Answer 1

table.draw() does not work because it is defined inside the $(document).ready scope. You must have global table variable, then it will be accessible in your displayAdvertRight() function too. I.e

var table;
$(document).ready(function() {
   ...
   table = $('#example').DataTable({    
   ...
});

I get the impression that you have two <select>-boxes, startTime and endTime, and the custom filter should filter out rowindexes (iDataIndex) outside those <select>'s range?

<select id="startTime"></select>
<select id="endTime"></select>

The custom filter can be simplified a little 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 calling table.draw() on <select> change event :

$("#startTime, #endTime").on('change', function() {
    table.draw();
});

demo -> http://jsfiddle.net/f09g7ssa/