jQuery数据表-添加行不工作

jQuery dataTables - adding row does not work

本文关键字：工作 添加行 数据表 jQuery      更新时间：2023-09-26

找到了很多解决方案，但没有一个适合我。有人能告诉我这个代码有什么问题吗?

My table is like

 <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.jsTIA

根据: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();

请看下面的例子

$(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>

有两个问题:

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

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

所以像这样初始化你的dataTable:

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

和你的代码工作。演示-> http://jsfiddle.net/eco6cgqe/

相关文章：