Javascript 用于显示最近记录的jQuery数据表

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

下面是我的示例代码：

    $(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"/>

$（文档）.ready（函数（）{
initTable（）；
} );
函数initTable（）{
oTable=$（'#表_id'）。数据表({
“aaSorting”：[[12，“desc”]，
“语言”：{
“数据处理”：“加载…”，
“显示菜单”：“显示”+
'10'+ 
'20'+
'30'+
'40'+
'50'+
“记录”
},
“bProcessing”：正确，
“bServerSide”：正确，
“asStripeClasses”：['evenrow'、'oddrow']，
“sAjaxSource”：“spreadData.do？method=searchSpreadData”，
“fnServerParams”：函数（aoData）
{ 
aoData.push（{“name”：“searchCriteria.toDate”，“value”：$（'#todateId'）.attr（“value”）}）；
aoData.push（{“名称”：“searchCriteria.SerialNumber”，“值”：$（'#serialNumberId'）.attr（“值”）}）；
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”：没错，
“bFilter”：错误
});
$（'#displayRecentRecords'）。单击（函数（）{
警报（“步骤1”）；
oTable.fnDraw（）；
} );
}   
//从UI选中复选框时，不会调用以下函数。
$.fn.dataTableExt.afnFiltering.push(
功能（oSettings、aData、iDataIndex）{
警报（“步骤2”）；
if（$（“#displayRecentRecords”）。是（'：选中的'））{
返回true；
}
返回！aData[11]；
}
);
显示最近的记录：

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

请建议对上述代码进行哪些更改，以调用最后提到的datatable函数（打印步骤2的alertbox）。

我不熟悉jQuery中的数据表概念。我阅读了文档，发现了几个例子。请查找JSFIDLE:

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

谢谢你的帮助。谢谢。

更改此行：

$.fn.dataTableExt.afnFiltering.push(

为此：

$oTable.fn.dataTableExt.afnFiltering.push(

或者（不确定哪种方法适用于您的情况）：

您需要将表定义为此函数的一部分。这就是

oTable

的作用，因为您在上面代码的第6行定义了这个变量。

更改这一行：

$.fn.dataTableExt.afnFiltering.push(

为此：

$oTable.fn.dataTableExt.afnFiltering.push(

或者（不确定哪种方法适用于您的情况）：

您需要将表定义为此函数的一部分。这就是

oTable

的作用，正如您在上面代码的第6行定义的那样

解决方案

在初始化表之前，需要定义自定义筛选函数

$.fn.dataTableExt.afnFiltering.push(
功能（oSettings、aData、iDataIndex）{
//…跳过。。。
}
);
var oTable=$（'#表_id'）。数据表({
//…跳过。。。
});

演示

有关代码和演示，请参阅

解决方案

在初始化表之前，需要定义自定义筛选函数

$.fn.dataTableExt.afnFiltering.push(
功能（oSettings、aData、iDataIndex）{
//…跳过。。。
}
);
var oTable=$（'#表_id'）。数据表({
//…跳过。。。
});

演示

---

有关代码和演示，请参阅。

您能定义“最近的记录”吗？@jonmrich-当用户选中复选框时，它只能显示最近的日期记录。我已经在服务器端实现了该逻辑，但问题是，如上所述，当我单击复选框（在alertbox中打印步骤2）时，不会调用最后提到的jquery函数。谢谢。你根据我的答案测试了我的代码吗？@jonmrich，还没有测试。我的坏服务器坏了。我会测试并告诉你。谢谢。你能定义“最近的记录”吗？@jonmrich-当用户选中复选框时，它只能显示最近的日期记录。我已经在服务器端实现了该逻辑，但问题是，如上所述，当我单击复选框（在alertbox中打印步骤2）时，不会调用最后提到的jquery函数。谢谢。你根据我的答案测试了我的代码吗？@jonmrich，还没有测试。我的坏服务器坏了。我会测试并告诉你。谢谢