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()

is it }); exrta before function displayAdvertRight() {?? — ozil
– ozil, Commented May 21, 2015 at 13:15
Sorry forgot to put in the document.ready(), I have edited my code above. I can't place the displayAdvertRight() inside the document.ready() as then I receive this error displayAdvertRight is not defined on click. — ObiEff
– ObiEff, Commented May 21, 2015 at 13:21

davidkonrad · Accepted Answer · 2015-05-22 14:25:09Z

2

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/

answered May 22, 2015 at 14:25

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ObiEff Over a year ago

Thanks, I can confirm that this solution does work, but why must table be in the global scope if I am not referencing it by variable name but instead by $("#example").dataTable().api()

davidkonrad Over a year ago

@ObiEff I cannot say why it did not worked with $("#example").DataTable().draw(); etc without seeing the specific code. It should defently work - see example with table in the "ready scope" using draw() -> jsfiddle.net/f09g7ssa/1 ...Perhaps you called displayAdvertRight() somewhere immediately before the page had finished loading?

ObiEff Over a year ago

The call happens from a button which is only clickable when the page is ready.

Pedro Joaquín Over a year ago

What if I have more than 1 table?

davidkonrad Over a year ago

@PedroJoaquín see this -> stackoverflow.com/q/55242822/1407478

Collectives™ on Stack Overflow

DataTable.js implement a filter to hide rows by index

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related