$(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",data: { param: value,year: year },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);
抛出此错误对话框
奇怪的是,表重绘并显示正确的记录数量,只是没有数据.
解决方法
Demo(Thx Allan！)
bDeferRender：true可以使用
您可以轻松更改我的addData函数以添加您的ajax调用
更新：
您应该使用数据表添加一些设置.我认为您应该开始阅读文档并查看一些示例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,"sAjaxSource": "GetJSON.ashx","aoColumns": [
{
"bSortable": false,"bSearchable": false,"mData": "MsgRef","sDefaultContent": "-"
},{
"bSortable": false,"mData": "Sender","sDefaultContent": "-"
}
//[...] etc
]
} );
} );
像这样,如果属性为null,则sDefaultContent替换null值以避免错误“unkNown parameter 0”
为了在服务器端工作,你应该看看：codeproject
您可以学习如何处理请求和参数.
例如,当您第一次加载页面时,数据表发送给您：
sEcho = 1&安培;开始= 0&安培;大小= 10 […]
当用户点击下一页时.数据表发送给你：
sEcho = 2及开始= 10安培;大小= 10 […].
当用户点击下一页时.数据表发送给你：
sEcho = 3及开始= 20安培;大小= 10 […]
而你可以想象其余的……
我不能为你做ajax！所以这是一个例子：
DEMO Jsfiddle for UPDATE 1
我强烈建议你在你的情况下做更新3！
我希望它对你有所帮助.如果它很好,你可以通过检查我的回复来解决你的帖子.我会很感激的！