Question

我正在尝试动态地向我的数据表添加一个新行。我有一个成功的插入，它返回刚刚创建的（在这种情况下）员工。一切正常 - 我只是无法添加新行。

我得到的错误 - 来自文档是这样的： DataTables警告：table id = {id} - 请求行{row-index} Requested Parameter Unknown

的未知参数'{parameter}'

哪个有意义，它'无法确定哪个列是“名称”还是“状态”等等。我只是不确定如何判断它是什么。试图理解文档，我只是不太明白（显然）。我很亲密，但需要一些帮助来克服驼峰。

以下是我最初创建表格的方法。 “mydata”也是一个json对象。这很完美。

的jQuery

Employee.listEmployees(function (mydata) {

$('#mytable').dataTable({
'data': mydata,
'columnDefs': [{
     'targets': 0,
      'title': '',
      'sortable': false,
      'class': 'text-center',
      'data': function () {
          return '<a href="#" class="edit"><i class="fa fa-pencil-square-o fa fa-lg"></i></a>';
      }
  },
  {
      'targets': 1,
      'title': "Name",
      'data': 'name'
  },
  {
      'targets': 2,
      'title': "Status",
      'render': function (data, type, row) {
          return '<span class="status status-' + (row.status).toLowerCase() + '">' + row.status + '</span>';
   }
   },
   {
       'targets': 3,
       'title': '',
       'sortable': false,
       'render': function (data, type, row) {
           return '<a href="#" class="remove" data-id="' + row.employee_id+ '"><i class="fa fa-times fa-lg"></i></a>';
         }
    }],
    'order': [[1, 'asc']],
    'drawCallback': function (settings) {
        alert('DataTables has redrawn the table');
         }
         });
        }
    });
});

修改这就是'data': mydata的样子：

0: Object
    createdon: "0000-00-00 00:00:00"
    employee_code: "001"
    employee_id: "1"
    name: "Joe Dirt"
    status: "Active"
    updatedon: null

当我添加一名新员工时 - 这是回来的数据：

JSON

0: Object
    createdon: "2014-12-19 14:39:37"
    employee_code: "002"
    employee_id: "456"
    name: "AAAAA"
    status: "Active"
    updatedon: "2014-12-19 08:39:37"

以下是我尝试添加新行的方法：

的jQuery

var employee= $.parseJSON(response);
var $table = $('#mytable').DataTable();

$table.row.add([{
'<a href="#" class="edit"><i class="fa fa-pencil-square-o fa fa-lg"></i></a>',
employee.name,
'<a href="#" class="edit"><i class="fa fa-pencil-square-o fa fa-lg"></i></a>'
'<a href="#" class="remove" data-id="' + row.employee_id+ '"><i class="fa fa-times fa-lg"></i></a>'
}]).draw();

使用draw()我尝试在没有页面刷新的情况下创建新行。谢谢你的时间！

修改

谢谢你，@ markpsmith。我已经更新了你的建议;不幸没有成功。没有错误，但没有成功。

记录成功写入数据库。当我进行整页刷新时，我可以看到在数据表中渲染的新记录（行），所以我知道一切都在“工作”。

从文档开始，我可以这样绘制表格：

的jQuery

var $table = $('#mytable').DataTable();
$table.order([[1, 'asc']]).draw(false);

我还在我的初始数据表创建中添加了一个回调函数，以便在表格重新绘制时（上面更新）显示警报。当我点击“保存”按钮时，我收到警报 - 告诉我表格已经重新绘制，但是在我进行整页刷新之前，我只是没有直观地看到新行。

修改

@markpsmith - 非常感谢你们的帮助。我真诚地感激它。这是我更新的表初始化：

的jQuery

$('#mytable').dataTable({
    'processing': true,
    'serverSide': true,
    'ajax': {
        'url': 'my-url/list',
        'type': 'get'
    },
    'columns': [
        {'data': ''},
        {'data': 'name'},
        {'data': 'status'},
        {'data': ''},
        {'data': ''},
        {'data': ''}
    ]
});

当我检查网络时 - 我可以看到呼叫已经完成 - 并且响应成功：

JSON

[
    {
     "employee_id":"1",
     "employee_code":"010",
     "name":"Joe Dirt",
     "createdon":"0000-00-0000:00:00",
     "updatedon":null,
     "status":"Active"
    }
]
... and so on ...

但现在我收到了错误Cannot read property 'length' of undefined。那令人费解 - 一切都在发生？

只是为了踢，这是我的标记：

HTML

<table id="mytable" class="table table-striped">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
        </tr>
    </thead>
    </table>

我也尝试过使用：

HTML

<table id="mytable" class="table table-striped"></table>

我仍然得到同样的错误。

解

首先，我无法感谢@markpsmith的所有帮助。

我想要做的是：使用jQuery Datatables插件列出所有员工。我有一个“创建员工”按钮，按下后会打开一个用户可以填写的表单，然后单击“提交”。如果在数据库中成功创建了记录，我希望现有列表能够立即显示新记录 - 无需刷新整页。

我们走了......

HTML

<table id="mytable" class="table table-striped"></table>

PHP

echo json_encode(array('draw' => 1, 'recordsTotal' => count($data), 'recordsFiltered' => count($data), 'data' => $data));

// $data is the json response coming from the database.

JSON

{
"draw": 1,
"recordsTotal": 10,
"recordsFiltered": 10,
"data": [{
        "employee_id": "1",
        "employee_code": "010",
        "name": "Joe Dirt",
        "createdon": "0000-00-00 00:00:00",
        "updatedon": null,
        "status": "Active"
    },{
        ...and so on...
    }]
}

以下是我的表最初初始化的方式：

的jQuery

$('#mytable').dataTable({
    'processing': true, // true because I want server to handle the data
    'serverSide': false, // false because I want client to handle pagination etc.
    'ajax': {
        'url': 'path-to-my-service',
        'type': 'get'
    },
    'columnDefs': [{
        'targets': 0,
        'title': '',
        'sortable': false,
        'class': 'text-center',
        'data': function () {
            return '<a href="#" class="edit"><i class="fa fa-pencil-square-o fa fa-lg"></i></a>';
        }
    },
    {
        'targets': 1,
        'title': "Name",
        'data': 'name'
    },
    {
        'targets': 2,
        'title': "Status",
        'render': function (data, type, row) {
            return '<span class="status status-' + (row.status).toLowerCase() + '">' + row.status + '</span>';
        }
    },
    {
        'targets': 3,
        'title': '',
        'sortable': false,
        'render': function (data, type, row) {
            return '<a href="#" class="remove" data-toggle="modal" data-id="' + row.employee_code+ '"><i class="fa fa-times fa-lg"></i></a>';
         }
     }],
     'order': [[1, 'asc']]
 });

我在成功创建新员工时使用回调（通过ajax请求）。

的jQuery

$('#submit').click(function (event) {
    Employee.createEmployee(function (response) {
        var data = $.parseJSON(response);
        // I don't actually do anything with the response, but wanted to see what was coming back.
        // console.log(data); 
        var $table = $('#mytable').DataTable();
        $table.ajax.reload(null, false);
        });
     });

希望这可以帮助那些偶然发现这篇文章的人。

jQuery DataTables从ajax响应中添加一个新行（json）

0 个答案: