jquery DataTable 服务器端添加行无法正常工作
jquery DataTable server side add Row not working properly
我正在尝试复制此处显示的示例:
DataTable t.row.add()
但将服务器端用于 table 人口:
这里是核心脚本:
var wh=window.innerHeight-250;
var table= $('#dataTable_e').DataTable( {
"processing": true,
"serverSide": true,
"stateSave": true,
"dom": 'RrtiS<"bottom">f<"clear">',
"pagination":false,
"scrollY": wh+"px",
"scrollX": true,
"deferRender": true,
"displayStart":0,
"ajax":
{
"url": "ajax/jsTable.asp",
"data": function (d) {
d.myKey="Alerts";
}
},
"drawCallback": function( settings ) {
$('#control-wraps a').fontSizer();
},
"columns": [
{"data": "ID"},
{"data": "WidgetID"},
{"data": "Active"},
{"data": "LangID"},
{"data": "ValidFrom"},
{"data": "ValidTo"},
{"data": "BkgColor"},
{"data": "TextColor"},
{"data": "FontFamily"},
{"data": "FontSize"},
{"data": "Height"},
{"data": "Rows"},
{"data": "Message"}
]
});
这很好用。
然后我尝试在单击按钮时添加新行,这是脚本:
$('#dataTable_e_new').click(function (e) {
e.preventDefault();
if (nNew && nEditing) {
if (confirm("Previose row not saved. Do you want to save it ?")) {
saveRow(table, nEditing); // save
$(nEditing).find("td:first").html("Untitled");
nEditing = null;
nNew = false;
} else {
table.fnDeleteRow(nEditing); // cancel
nEditing = null;
nNew = false;
return;
}
}
//var aiNew =
table.row.add(
[ {"ID": "2"},
{"WidgetID": "System Architect"},
{"Active": "0,800"},
{"LangID": "2011/04/25"},
{"ValidFrom": "Edinburgh"},
{"ValidTo": "5421"},
{"BkgColor": "red"},
{"TextColor": "green"},
{"FontFamily": "Arial"},
{"FontSize": "50"},
{"Height": "300"},
{"Rows": "3"},
{"Message": "Test"}
]
).draw();
});
但它不起作用:我尝试了几种数据形状,但我总是得到:
DataTables warning: table id=dataTable_e - Requested unknown parameter 'ID' for row 1
显然我没有传递正确的格式,但不知道如何处理:-(
如有任何建议,我们将不胜感激。
感谢阅读。
尝试将其添加为 html 行并重新绘制。这就是我们为我们的项目所做的。我也不知道“#dataTable_e_new”,但我猜这是按钮的 ID。
var newRow = "<tr>" +
"<td id=\"ID" + "">" + 2 + "</td>" +
"<td id=\"WidgetID" + "">" + System Architect + "</td>" +
"<td id=\"Active" + "">" + 0,800 + "</td>" +
. . .
"</tr>";
$('#dataTable_e').DataTable().row.add($(newRow)).draw();
查看示例 fiddle:http://jsfiddle.net/g2h2g5ks/
如果您将 "columns" 定义为对象,那么您应该添加一个对象而不是数组。
您既没有添加数组,也没有添加单个对象,而是添加了对象数组。
所以使用
table.row.add({
"ID": "2",
"WidgetID": "System Architect",
"Active": "0,800",
"LangID": "2011/04/25",
"ValidFrom": "Edinburgh",
"ValidTo": "5421",
"BkgColor": "red",
"TextColor": "green",
"FontFamily": "Arial",
"FontSize": "50",
"Height": "300",
"Rows": "3",
"Message": "Test"
})
.draw();
我正在尝试复制此处显示的示例: DataTable t.row.add() 但将服务器端用于 table 人口: 这里是核心脚本:
var wh=window.innerHeight-250;
var table= $('#dataTable_e').DataTable( {
"processing": true,
"serverSide": true,
"stateSave": true,
"dom": 'RrtiS<"bottom">f<"clear">',
"pagination":false,
"scrollY": wh+"px",
"scrollX": true,
"deferRender": true,
"displayStart":0,
"ajax":
{
"url": "ajax/jsTable.asp",
"data": function (d) {
d.myKey="Alerts";
}
},
"drawCallback": function( settings ) {
$('#control-wraps a').fontSizer();
},
"columns": [
{"data": "ID"},
{"data": "WidgetID"},
{"data": "Active"},
{"data": "LangID"},
{"data": "ValidFrom"},
{"data": "ValidTo"},
{"data": "BkgColor"},
{"data": "TextColor"},
{"data": "FontFamily"},
{"data": "FontSize"},
{"data": "Height"},
{"data": "Rows"},
{"data": "Message"}
]
});
这很好用。 然后我尝试在单击按钮时添加新行,这是脚本:
$('#dataTable_e_new').click(function (e) {
e.preventDefault();
if (nNew && nEditing) {
if (confirm("Previose row not saved. Do you want to save it ?")) {
saveRow(table, nEditing); // save
$(nEditing).find("td:first").html("Untitled");
nEditing = null;
nNew = false;
} else {
table.fnDeleteRow(nEditing); // cancel
nEditing = null;
nNew = false;
return;
}
}
//var aiNew =
table.row.add(
[ {"ID": "2"},
{"WidgetID": "System Architect"},
{"Active": "0,800"},
{"LangID": "2011/04/25"},
{"ValidFrom": "Edinburgh"},
{"ValidTo": "5421"},
{"BkgColor": "red"},
{"TextColor": "green"},
{"FontFamily": "Arial"},
{"FontSize": "50"},
{"Height": "300"},
{"Rows": "3"},
{"Message": "Test"}
]
).draw();
});
但它不起作用:我尝试了几种数据形状,但我总是得到:
DataTables warning: table id=dataTable_e - Requested unknown parameter 'ID' for row 1
显然我没有传递正确的格式,但不知道如何处理:-(
如有任何建议,我们将不胜感激。 感谢阅读。
尝试将其添加为 html 行并重新绘制。这就是我们为我们的项目所做的。我也不知道“#dataTable_e_new”,但我猜这是按钮的 ID。
var newRow = "<tr>" +
"<td id=\"ID" + "">" + 2 + "</td>" +
"<td id=\"WidgetID" + "">" + System Architect + "</td>" +
"<td id=\"Active" + "">" + 0,800 + "</td>" +
. . .
"</tr>";
$('#dataTable_e').DataTable().row.add($(newRow)).draw();
查看示例 fiddle:http://jsfiddle.net/g2h2g5ks/
如果您将 "columns" 定义为对象,那么您应该添加一个对象而不是数组。 您既没有添加数组,也没有添加单个对象,而是添加了对象数组。 所以使用
table.row.add({
"ID": "2",
"WidgetID": "System Architect",
"Active": "0,800",
"LangID": "2011/04/25",
"ValidFrom": "Edinburgh",
"ValidTo": "5421",
"BkgColor": "red",
"TextColor": "green",
"FontFamily": "Arial",
"FontSize": "50",
"Height": "300",
"Rows": "3",
"Message": "Test"
})
.draw();