将新数据加载到Jquery DataTables中

Question

我将数据加载到我的表中,如下所示:

 $(document).ready(function () {

     var variable= 'sometext'

     $.ajax({
         type: "POST",
         url: "GetJSON.ashx",
         cache: false,
         data: { param: variable},
         dataType: "json",
         success: function (data) {

             var html = '';
             for (var key = 0, size = data.length; key < size; key++) {
                 html += '<tr><td>' + data[key].SessionID + '</td><td>'
                 + data[key].val1+ '</td><td>'
                 + data[key].val2+ '</td><td>'
                 + data[key].val3+ '</td><td>'
                 + data[key].val4+ '</td><td>'
                 + data[key].val5+ '</td><td>'
                 + data[key].Status + '</td></tr>'
             }
             $('#table).append(html);

             otableName = $('#table).dataTable({
                 //"bDestroy": true,
                 "bPaginate": true,
                 "sPaginationType": "bootstrap",
                 "iDisplayLength": 20,
                 "sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
                 "oTableTools": {
                     "sSwfPath": "media/swf/copy_csv_xls_pdf.swf",
                     "aButtons": [
                     "copy",
                     "print",
                     {
                         "sExtends": "collection",
                         "sButtonText": 'Save <span class="caret" />',
                         "aButtons": ["csv", "xls", "pdf"]
                     }
                     ]
                 }
             })

         },
         error: function (xhr, status, error) {
             var err = eval("(" + xhr.responseText + ")");

             alert(err.Message);

         }
     });
 });

这个工作非常好,并呈现一个漂亮的表.现在,我添加了一个包含年份(2009-2013)的下拉列表,当用户选择时,它会调用另一个ashx页面并检索给定年份的所有记录.我正在努力做的是将这个新数据集发送到现有表.

我试过这个:

 $('#ArchiveYears').change(function () {
        var year = $("#ArchiveYears option:selected").text();

        var senderBIC = 'DIAGGB2LACTB'
        // Need to filter out the table with the year
        $.ajax({
            type: "POST",
            url: "GetJSONYearly.ashx",
            cache: false,
            data: { param: value, year: year },
            dataType: "json",
            success: function (data) {
                var dataTable = $('#table').dataTable();
                dataTable.fnClearTable(this);
                for (var i = 0; i < data.length; i++) {
                    dataTable.oApi._fnAddData(oSettings, data[i]);
                }
                oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
                dataTable.fnDraw();
            }
      });

});

抱怨没有宣布oSettings!

那么,删除现有表格内容并将其加载到新内容的最佳方法是什么？

好的,按照你的建议,我尝试了以下方法:

success: function (data) {


                var dataTable = $('#tblMsgDateDetail').dataTable();

                dataTable.fnClearTable();

                dataTable.fnAddData(data);

抛出此错误对话框

奇怪的是,表重绘并显示正确的记录数量,只是没有数据.

Answer 1

回复简短!

演示(Thx Allan!)

bDeferRender: true 可以使用

您可以轻松更改我的addData功能,以添加您的ajax调用

更新:

你应该在数据表中添加一些设置.我认为您应该开始阅读文档并在此处查看一些示例

对于此错误,您应该定义列并进行检查sDefaultContent.

示例:

 $('#example').dataTable( {
    "aoColumnDefs": [
      {
        "mData": null,
        "sDefaultContent": "Edit",
        "aTargets": [ 0 ]
      }
    ]
  } ); 

更新2

如果你加载数据服务器端检查这个例子.datatable为您完成工作.

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "GetJSON.ashx"
    } );
} );

如果您使用dotnet(服务器端),您可以检查这一点

更新3

将列定义为数据表,如果您的"数据"结果如下:

{ 
"sEcho":1, 
"iTotalRecords":"57", 
"iTotalDisplayRecords":"57", 
"aaData":[ 
{ 
"MsgRef":"JF5465446", 
"Sender":456545645445, 
"Receiver":"Win 98+ / OSX.2+", 
"MsgDate":"2010/02/23", 
"MsgType":"SUCCESS", 
"Currency":"$", 
"Amount":"120.02", 
"B1":"John1", 
"B2":"John2", 
"B3":"John3", 
"B4":"John4", 
"Status":"A" 
} 
] 
}

注意sEcho每个新的ajax调用必须在服务器端增加, iTotalRecords并且iTotalDisplayRecords对你来说应该是相同的,它的行数在这里你可以像这样设置你的列:

$(document).ready(function() { 
$('#example').dataTable( { 
"bProcessing": true, 
"bServerSide": true, 
"sAjaxSource": "GetJSON.ashx", 
"aoColumns": [ 
{ 
"bSortable": false, 
"bSearchable": false, 
"mData": "MsgRef", 
"sDefaultContent": "-" 
}, 
{ 
"bSortable": false, 
"bSearchable": false, 
"mData": "Sender", 
"sDefaultContent": "-" 
} 
//[...] etc 
] 
} ); 
} );

像这样,如果属性为null,则sDefaultContent替换null值以避免错误" unknown parameter 0"

为了在服务器端工作,你应该看看:codeproject 你可以学习如何处理请求和参数.

例如,当您第一次加载页面时,数据表发送给您:

sEcho=1&start=0&size=10[...]

当用户点击下一页时.数据表发送给你:

sEcho=2&start=10&size=10[...].

当用户点击下一页时.数据表发送给你:

sEcho=3&start=20&size=10[...]

而你可以想象其余的......

我不能为你做ajax!所以这是一个例子:

DEMO JsFiddle for UPDATE 1

我强烈建议你在你的情况下做更新3!

我希望它对你有所帮助.如果它很好,你可以通过检查我的回复来解决你的帖子.我会很感激的!