提问者:小点点

jQuery DataTable服务器端添加行不能正常工作


我试图复制这里显示的示例: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

显然,我没有传递正确的格式,但不知道如何处理:-(

任何建议都会得到答复。谢谢你的阅读。


共2个答案

匿名用户

如果您将“列”定义为对象,那么您应该添加一个对象而不是数组。您既没有添加数组,也没有添加单个对象,而是添加了对象数组。所以用

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

匿名用户

尝试将其添加为html行并重新绘制。我们的项目就是这样做的。我也不知道“dataTable”是什么,但我猜是按钮的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/