jQuery dataTables - 添加行不起作用

时间:2015-05-15 06:25:24

标签: javascript jquery datatables

找到了很多解决方案,但没有什么对我有用。谁能告诉我这段代码有什么问题?

我的表就像

 <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

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

见这个例子

&#13;
&#13;
$(function(){

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

});
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

您有两个问题:

  1. 您应该包含library(data.table)#v1.9.5+ dcast(setDT(df1), Ordernumber~Category, value.var='Sold_Items')[, frequency:=do.call(pmax, c(.SD, na.rm=TRUE)), .SDcols=2:5] 元素。即使在没有<tbody>的情况下添加行也会有效,但在使用带有格式错误标记的dataTable时存在严重的错误风险。

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

  3. 所以请改为初始化你的dataTable:

    <tbody>

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