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