jQuery数据表 - 添加行不起作用。

Question

很多解决方案都被找到了，但是对我来说都没有用。请问有人能告诉我这段代码哪里出了问题吗？

我的表格像这样：

 <table id="allPermission" class=" table-striped" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Permission No</th>
                    <th>Permission</th>
                    <th>Command</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
            <tfoot>
                <tr>
                    <th>Permission No</th>
                    <th>Permission</th>
                    <th>Command</th>
                </tr>
            </tfoot>
        </table>

这是我的JavaScript代码：

var tbl = $('#allPermission').DataTable({
  "processing": true,
  "retrieve": true,
  "serverSide": true,
  "lengthMenu": [
    [5, 10, 25, -1],
    [5, 10, 25, "All"]
  ],
  "ajax": $.fn.dataTable.pipeline({
    url: 'rest/showAllPermissions',
    pages: 2 // number of pages to cache
  }),
  "columns": [{
    "data": "permid"
  }, {
    "data": "permissionname"
  }, {
    "data": "DT_RowId",
    "sortable": false,
    "render": function(data, type, full) {
      var result = "";

      result = '<a class="btn btn-info btn-sm" href=/fieldforce/user/editAdmin/' + full.dt_RowId + ' style="width: 58px;"' + '>' + 'Edit' + '</a>' + '<a class="btn btn-danger btn-sm" href=/fieldforce/user/deleteAdmin/' + full.dt_RowId + ' style="margin-left: 15px;"' + '>' + 'Delete' + '</a>';
      return result;
    }
  }],
  "deferRender": true,
  "scrollY": "250px"
});

$('#addPerm').submit(function(e) {
  e.preventDefault();
  $('#loadingGif').css({
    "display": "block"
  });
  $('#formBody').css({
    "display": "none"
  });
  // do ajax submition
  $.ajax({
    url: "/fieldforce/administration/rest/addPermission",
    type: "POST",
    data: $(this).serialize(),
    success: function(data, status, xhr) {
      $('#loadingGif').css({
        "display": "none"
      });
      // $('#addPermission').modal('toggle');
      $('#messageBody').html("Success");
      tbl.row.add({
        "permid": '9',
        "permissionname": 'admin',
        "DT_RowId": '8'
      }).draw();
    },
    error: function(jqXHR, textStatus, errorThrown) {
      $('#messageBody').html("Server Error");
    }
  });
});

我正在使用jquery版本jquery-1.11.1.min，数据表版本是//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js TIA

- Amir

---

你收到了什么错误？ - CodeWithCoffee

调试时没有错误显示，但行未添加。 - Amir

@Amir，请查看我的编辑后的答案。 - Mohammad Ashfaq

Answer 1

根据https://datatables.net/examples/api/add_row.html网站，您应该在add方法中传递数组。

请尝试以下内容：

 var tbl = $('#allPermission').DataTable();
          tbl.row.add(['9','admin','8']).draw();

根据此文档: https://datatables.net/reference/api/rows.add()，您可以尝试以下方法：

var tbl = $('#allPermission').DataTable();
 tbl.rows.add([{
     "permid": '9',
     "permissionname": 'admin',
     "dt_RowId": '8'
 }]).draw();

- Mohammad Ashfaq

---

谢谢回复。我已经尝试过了，但它会导致列不匹配的错误。 - Amir

@Amir，你能展示一下你的HTML表格代码吗？HTML表格中有多少列？ - The Coder

你可以添加对象和数组。请参阅文档-> **https://datatables.net/reference/api/row.add()**，而不是示例。顺便说一句，你回答中的最后一个代码片段会导致错误并且无法工作，因为你基本上只是尝试将一个对象插入到第一列。 - davidkonrad

大卫康拉德@那我该怎么办？ - Amir

Answer 2

看这个例子。

$(function(){

  var tbl = $('#allPermission').DataTable();
  tbl.row.add(['9','admin','8']).draw();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="allPermission">
  <thead>
            <tr>
                <th>permid</th>
                <th>permissionname</th>
                <th>dt_RowId</th>
            </tr>
        </thead>

</table>

- jad-panda

Answer 3

您有两个问题：

1. 您应该包含一个 <tbody> 元素。即使添加行而没有 <tbody> 也可以工作，但使用 dataTables 时，存在格式错误的严重风险。

2. 当将对象添加为新行时，您必须通过 columns：[{data：'property'} ...] 选项指定哪些数据属性对应哪些列。

因此，请像这样初始化您的 dataTable：

var tbl = $('#allPermission').DataTable({
    columns: [
        { data: "permid" },
        { data: "permissionname" },
        { data: "dt_RowId" }
    ]    
});

你的代码可用。演示 -> http://jsfiddle.net/eco6cgqe/

- davidkonrad

---

davidkonrad@ 感谢您提供的两条宝贵信息。我已编辑了我的问题。您能否请查看我的最新代码，并告诉我这段代码有什么问题？ - Amir