Question

我创建了这个过滤器，将行的索引与starttime和endtime变量进行比较。我们的想法是starttime和endtime的值对应于表中的行。

$(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不是一个函数或类似的东西，我已经查看了faq中有关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>） 1}}的范围？

<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));
    }
);

然后，您只需在table.draw()更改事件上调用<select>：

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

演示 - ＆gt;的 http://jsfiddle.net/f09g7ssa/

DataTable.js实现了一个过滤器，用于按索引

1 个答案: