jquery - 使用 AJAX 初始化数据表后使用 .row.add()

Question

我已经用ajax初始化了一个数据表，现在当我尝试添加一行时我什么也得不到。

在控制台中输入添加新行命令时出现以下错误:

"Uncaught TypeError: Cannot read property 'add' of undefined at :2:10 at Object.InjectedScript._evaluateOn (:904:140) at Object.InjectedScript._evaluateAndWrap (:837:34) at Object.InjectedScript.evaluate (:693:21)"

        // initialise table
        var table = $('#example').DataTable( {

            dom:    "<'row'<'col-sm-6' <'toolbar'> > >" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-5'i><'col-sm-7'p>>",
            processing: true,
            serverSide: true,
            ajax: '{{ route('admin.data') }}',
            columns: [
                {
                    "className":      'center',
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ''
                },
                { data: 'last_name' },
                { data: 'first_name' },
                { data: 'email' },
                { data: 'phone', orderable: false }
            ],
            order: [[1, 'asc']],
            initComplete: function() {
                $('td.center').html('<i class="fa fa-plus-circle"></i>');
            }

        });

        // add new row
        $('#quick-access .btn-add').on('click', function() {
            var first = $('#val2').val();
            var last = $('#val1').val();
            var email = $('#val3').val();

            table.row.add( [
                'last_name': last,
                'first_name': first,
                'email': email,
                'phone': ''
            } ).draw();
            $("#quick-access").css("bottom","-115px");
        });

目前，一旦我触发 row.add() 函数，它就会更新表，但会在没有新行的情况下重新绘制它？关于我做错了什么有任何提示吗？

非常感谢!

Answer 1

您需要使用与 row.add() 相同的结构如表结构。

来自manual :

If a data structure is used (i.e. array or object) it must be in the same format as the other data in the table (i.e. if your table uses objects, pass in an object with the same properties here!).

例如:

 table.row.add( {
    'last_name': last,
    'first_name': first,
    'email': email,
    'phone': ''
 } ).draw();

您还使用服务器端处理模式 serverSide: true 和 draw() 使脚本再次从服务器检索数据。由于您的记录不在服务器上，DataTables 仅检索服务器上可用的记录并忽略您新添加的记录。

在这种情况下，最好的选择是在服务器上添加记录，然后使用 draw() 或 ajax.reload() API 方法。