Question

我是jQuery中dataTables概念的新手。我正在努力学习和使用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 警告框。

请建议对上述代码进行哪些更改以调用上次提到的数据表函数（alertbox打印step2）。

我是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行定义了此变量。

Answer 2

<强>解

您需要在初始化表之前定义自定义过滤功能。

$.fn.dataTableExt.afnFiltering.push(
   function( oSettings, aData, iDataIndex ){
      // ... skipped ...
   }
);

var oTable = $('#table_id').dataTable({
   // ... skipped ...
});

<强>样本

请参阅this jsFiddle以获取代码和演示。

jQuery dataTable显示最近的记录

2 个答案: