Question

我试图复制此处显示的示例： DataTable t.row.add() 但使用服务器端进行表填充：这里核心脚本：

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": "$320,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

显然，我没有传递正确的格式但不知道如何处理： - （

任何建议都会被贬低。感谢阅读。

Answer 1

如果将“columns”定义为对象，则应添加一个对象而不是数组。您既没有添加数组，也没有添加单个对象，只添加了对象数组。所以使用

table.row.add({
  "ID": "2",
  "WidgetID": "System Architect",
  "Active": "$320,800",
  "LangID": "2011/04/25",
  "ValidFrom": "Edinburgh",
  "ValidTo": "5421",
  "BkgColor": "red",
  "TextColor": "green",
  "FontFamily": "Arial",
  "FontSize": "50",
  "Height": "300",
  "Rows": "3",
  "Message": "Test"
})
.draw();

Answer 2

尝试将其添加为html行并重新绘制。那就是我们如何为我们的项目做到这一点。我不知道＆＃39;＃dataTable_e_new＆＃39;或者，但我猜它是按钮的ID。

var newRow = "<tr>" +
    "<td id=\"ID" + "">" + 2 + "</td>" +
    "<td id=\"WidgetID" + "">" + System Architect + "</td>" +
"<td id=\"Active" + "">" + $320,800 + "</td>" +
. . .                       
    "</tr>";
                            $('#dataTable_e').DataTable().row.add($(newRow)).draw();

见示例小提琴：http://jsfiddle.net/g2h2g5ks/

jquery DataTable服务器端添加行无法正常工作

2 个答案: