Jquery DataTable 事件未调用

Posted 2023-05-07

【中文标题】Jquery DataTable 事件未调用

【英文标题】：Jquery DataTable Event is not calling

【发布时间】：2015-09-08 20:29:06

【问题描述】：

我正在使用 jquery 数据表。表工作正常。我的意思是正确加载记录。现在我想要的是，我需要过滤记录 例如，我在 DataTable 中有很多记录，我想过滤（自定义）记录，这些记录只会显示特定列的正数。

所以，为此我创建了下面的函数。

$.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) 
        alert('51');
        if (myFilter.val() == 1)
            return true;
        else if (myFilter.val() == 2)
            return (aData[3].indexOf('-') == -1);
        else
            return (aData[3].indexOf('-') != -1);
    
);

但我不知道为什么它没有调用。我想调用这个函数。我已经使用服务器端处理方法进行绑定。我知道这个方法会在bind(draw)的时候调用。

我在任何地方都调用过这个函数，比如，

a) 在 $(document).ready 中， b) DataTable 配置设置后 c) 在 $(document).ready 之外

而且，通常我手动重新创建了 DataTable。

 var oTable = $('#DataGrid').dataTable();                
            oTable.fnDestroy();
            $('#DataGrid').empty();

Tblheader = '<thead><tr><th> <select id="myFilter" class="select-filter"><option value="1">All</option> <option value="2">Positive</option> <option value="3">Negative</option> </select></th> </tr>      <tr><th rowspan="2" style="width: 5%;">Excl.</th><th rowspan="2">CUC</th> <th rowspan="2" > Late Model </th><th colspan="2">' +
                'Test1 </th><th colspan="2"> Test 2 </th> <th rowspan="2"> Test 3 </th><th id="thQtyParts" class="clsQtyParts" colspan="12" align="center"> Test 4 ' +
                                              '</th> <th rowspan="2"> Test 87 </th> <th rowspan="2"> Test 5 </th> <th colspan="4" align="center"> <input id="btnSurplus1" type="button" value="Positve" style="width: 100px;" /> Test 6 </th> <%--<th> &nbsp; </th>--%> ' +
                                              '</tr> <tr> <th> Test 7 </th> <th> Test 8</th><th> Test 8 </th> <th>Test 9</th><th> 12 </th> <th>11</th> <th> ' +
                                              '10 </th> <th>9 </th> <th> 8 </th> <th> 7  </th> <th> 6 </th>' +
                                              '<th> 5 </th>  <th>4 </th> <th> 3</th>  <th>2 </th> <th> 1  </th> <th> Test 22 </th> <th> test 23</th> <th>' +
                                              ' Test 11</th> <th> test 12</th> <%--<th>  &nbsp; </th>--%>   </tr> </thead>';

            $("#DataGrid").append(Tblheader);

            if (val == "Test Model") 

                $("#DataGrid").DataTable(
                    "iDisplayLength": 10,
                    "bServerSide": true,
                   /* "sDom": 'fltip', */
                    "sAjaxSource": '<%= Url.Action("GetTestData") %>',
                    "sServerMethod": "POST",
                    "fnServerParams": function (aoData) 
                        aoData.push( "name": "ID", "value": $("#ddl1").val() ,
                     "name": "strCatg", "value": $("#ddlCat").val() )
                    ,
                    "aoColumns": [ sWidth: '1%' ,  sWidth: '5%' ,  sWidth: '5%' ,  sWidth: '5%' ,  sWidth: '5%' ,  sWidth: '5%' ,  sWidth: '5%' ,  sWidth: '5%' ,
                     sWidth: '5%' ,  sWidth: '5%' ,  "targets": [10], "visible": false, "searchable": false ,  "targets": [11], "visible": false, "searchable": false ,
                     "targets": [12], "visible": false, "searchable": false ,  "targets": [13], "visible": false, "searchable": false ,  "targets": [14], "visible": false, "searchable": false ,
                     "targets": [15], "visible": false, "searchable": false ,  "targets": [16], "visible": false, "searchable": false ,  sWidth: '5%' ,  sWidth: '5%' ,  sWidth: '5%' ,
                     sWidth: '5%' ,  sWidth: '5%' ,  sWidth: '5%' ,  sWidth: '5%' ,  sWidth: '5%' ,  sWidth: '5%'],
                    "fnInitComplete": function (oSettings, json) 
                        setTimeout(function ()  $.loader('close'); , 1000);
                    
                );

谢谢 -尼梅什

【问题讨论】：

你忘记了d) 在数据表被初始化之前！这将被自动调用。

【参考方案1】：

终于找到了解决办法。 我在

中创建了一个功能，例如在测试按钮 onclick 上

$(document).ready(function ()     
 $("#btnTest").click(function () 
                    $("#Grid").dataTable().fnDestroy();
                    $.fn.dataTableExt.afnFiltering.push(
                    function (oSettings, aData, iDataIndex)                     
                        /* You code goes here */ 
                    );
                );

);

这对我来说很好。