jQuery dataTables - 添加行不起作用

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>

我的java脚本代码在这里

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

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

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>

Answer 3

你有两个问题：

1. 您应该包含一个<tbody> 元素。即使在没有<tbody> 的情况下添加行也可以，但在使用带有格式错误标记的数据表时存在严重的错误风险。

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

所以像这样初始化你的数据表：

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

并且您的代码有效。演示 -> http://jsfiddle.net/eco6cgqe/