DataTable.js 实施过滤器以按索引隐藏行

Question

我创建此过滤器是为了将行的索引与开始时间和结束时间变量进行比较。这个想法是 starttime 和 endtime 的值对应于 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();

       }

我已经尝试了以下所有调用来获取要过滤的函数，但它不起作用，我总是得到 $(...).dataTable(...).api 的响应(...).fnDraw 不是函数或类似的东西，我查看了常见问题解答中关于 dataTable 与 DataTable 的部分，但它没有解决任何问题

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

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

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

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

我不知道如何触发过滤器事件，因为我似乎无法调用 draw()

Answer 1

table.draw() 不起作用，因为它是在 $(document).ready 范围内定义的。您必须具有全局 table 变量，然后它也可以在您的 displayAdvertRight() 函数中访问。即

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

我的印象是你有两个 <select>-框，startTime 和 endTime，自定义过滤器应该过滤掉那些之外的行索引 (iDataIndex) <select>的范围？

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

自定义过滤器可以稍微简化一下：

$.fn.dataTableExt.afnFiltering.push(
    function (oSettings, aData, iDataIndex) {
        var startTime = parseInt($("#startTime").val()),
            endTime = parseInt($("#endTime").val());
        return ((iDataIndex >= startTime) && (iDataIndex <= endTime));
    }
);

然后您所要做的就是在 <select> 更改事件上调用 table.draw() :

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

演示 -> http://jsfiddle.net/f09g7ssa/

DataTable.js 实施过滤器以按索引隐藏行

DataTable.js implement a filter to hide rows by index

javascript

datatable

jquery

jquery-datatables