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

我得到的错误 - 来自文档是这样的：DataTables警告：table id = - 请求未知参数'' for row Requested Parameter Unknown

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

这是我最初创建表的方式 . “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');
         }
         });
        }
    });
});

EDIT 这就是 '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() 我正在尝试创建没有页面刷新的新行 . 感谢您的时间！

EDIT

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

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

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

jQuery

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

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

EDIT

@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>

我仍然得到同样的错误 .

SOLUTION

首先，我不能感谢@markpsmith的所有帮助 .

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

开始了...

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 jquery-datatables