DEMO JsFiddle for UPDATE 1

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);

抛出此错误对话框

after addData

奇怪的是，虽然表重绘并显示正确的记录数量，但没有数据。

Answer 1

简短的回复！

Demo（Thx Allan！）

bDeferRender: true可以使用

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

UPDATE：

您应该使用数据表添加一些设置。我认为您应该开始阅读文档并查看一些示例here

对于此错误，您应该定义列并检查sDefaultContent。

示例：

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

更新2

如果你加载数据服务器端检查这个example。 datatable为你做的工作。

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

如果你使用dotnet（服务器端），你可以检查this

更新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会替换空值以避免错误“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！

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

将新数据加载到Jquery DataTables中

1 个答案:

UPDATE：

更新2

更新3

DEMO JsFiddle for UPDATE 1