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

Question

我用ajax初始化了一个数据表,现在当我尝试添加一行时,我什么都没得到.

在控制台中输入add new row命令我收到以下错误:

"未捕获的TypeError:无法在Object.InjectedScript.evaluate(:693)的Object.InjectedScript._evaluateAndWrap(:837:34)处的Object.InjectedScript._evaluateOn(:904:140)处读取未定义的属性'add':2:10 :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()表结构相同的结构.

从手册:

如果一个数据结构被使用(即阵列或对象)它必须在相同的格式在表中的其他数据(即,如果你的表使用对象,通过与这里相同的属性的对象!).

例如:

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

您还使用服务器端处理模式serverSide: true,并draw()会导致脚本再次从服务器获取数据.由于您的记录不是在服务器上,数据表只检索服务器上可用的记录,而忽略你的新添加的记录.

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