javascript - jQuery dataTable 显示最近的记录

Question

我对 jQuery 中的 dataTables 概念不熟悉。我正在尽力学习和使用数据表。我的要求是在选中复选框时显示最近的记录。我正在使用 jQuery 数据表。

下面是我的示例代码:

    $(document).ready(function() {
        initTable();
        } );

    function initTable(){
            oTable = $('#table_id').dataTable({
                                "aaSorting": [[ 12, "desc" ]],
                                "oLanguage": {
                                "sProcessing": "<span style='font-size:20px; color:blue;'>Loading...<span/>",
                                 "sLengthMenu": 'Display <select>'+
                                   '<option value="10">10</option>'+ 
                                   '<option value="20">20</option>'+
                                   '<option value="30">30</option>'+
                                   '<option value="40">40</option>'+
                                   '<option value="50">50</option>'+
                                   '</select> records'
                                            },
                                "bProcessing": true,
                                "bServerSide": true,
                                "asStripeClasses": [ 'evenrow', 'oddrow' ],
                                "sAjaxSource": "spreadData.do?method=searchSpreadData",
                                 "fnServerParams": function ( aoData )
                                 { 
                                   aoData.push({"name":"searchCriteria.toDate", "value": $('#todateId').attr("value") });
                                   aoData.push( { "name":"searchCriteria.SerialNumber", "value":$('#serialNumberId').attr("value")});
                                   aoData.push( { "name":"searchCriteria.formatId", "value": $('#formatId').attr("value")});
                                   aoData.push( {  "name":"searchCriteria.fromDate", "value": $('#fromdateId').attr("value")});
                                   aoData.push( {  "name":"searchCriteria.doSearch", "value": $('#doSearchId').attr("value")});   
                                   aoData.push( {  "name":"searchCriteria.spreadpercentage", "value": $('#spreadPercentage').attr("value")}); 
                             },
                                 "aoColumnDefs": [
                                     { "bVisible": false, "aTargets": [ 0 ] },
                                                               { "bVisible": false, "aTargets": [ 11 ] }
                                    ],
                                "bJQueryUI": true,
                                "bFilter": false
                        });
            $('#displayRecentRecords').click( function() {
                alert("step1");
                oTable.fnDraw();
        } );
    }   
  //The below function is not getting called when checkbox is checked from UI.   
    $.fn.dataTableExt.afnFiltering.push(
        function( oSettings, aData, iDataIndex ) {
            alert("step2");
             if($("#displayRecentRecords").is(':checked')){
               return true;
           }
            return !aData[11];

         }
    );

Show Recent Records:<input type="checkbox" id="displayRecentRecords"/>

请参阅上面的示例代码。当我运行应用程序并选择复选框 step1 时，会显示警报框，但 step2 警报框不会被调用。

请建议对上述代码进行哪些更改以调用最后提到的数据表函数(打印步骤2的警报框)。

我对 jQuery 中的 dataTable 概念不熟悉。我阅读了文档并发现了一些示例。请找到JSFiddle:http://jsfiddle.net/9jf2k53p/135/ 。

请建议在 JSFiddle 中进行哪些修改，以在选中该复选框时显示最新记录。

感谢您的帮助。谢谢。

Answer 1

更改此行:

$.fn.dataTableExt.afnFiltering.push(

对此:

$oTable.fn.dataTableExt.afnFiltering.push(

或者(不确定哪一个适合您的情况):

$oTable.dataTableExt.afnFiltering.push(

您需要将表定义为该函数的一部分。这就是 oTable 的用途，因为您在上面代码的第 6 行定义了此变量。