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

Question

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

在控制台中输入添加新行命令我得到以下错误：

“未捕获的类型错误：无法读取未定义的属性“添加” 在:2:10 在 Object.InjectedScript._evaluateOn (:904:140) 在 Object.InjectedScript._evaluateAndWrap (:837:34) 在 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：

如果使用数据结构（即数组或对象），它必须与表中其他数据的格式相同（即，如果您的表使用对象，请在此处传入具有相同属性的对象！）。

例如：

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

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

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