如何将空行添加到数据表

Question

我正在使用 JQuery DataTables 并尝试向 DataTable 添加一个空行。 我有下面的代码，但没有添加一个新的空行。

我如何需要重新编写它以便添加一个空行？

<script>
$(document).ready(function () {
    $("#btnCheck").click(function () {
        var table = $('#data').DataTable({
            dom: 'Bfrtip',
            buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ],
            "ajax": function (data, callback, settings) {
                $.ajax({
                    url: 'https://localhost:44328/api/employee-data',
                    dataType: "JSON",
                    success: function (data) {
                            var o = {"data":[]};
                            for(var i in data.data)
                            {
                                var row = [data.data[i].empID,data.data[i].empSA];
                                o.data.push(row);
                            }
                            callback(o);
                    }
                })
            }
        })
    });
        $('#AddRow').on('click', function () {
        var t = $('#data').DataTable();
        t.row.add( [] ).draw();
    } );
    $('#AddRow').click();
});
</script>

编辑
我将代码编辑为此，但现在我在控制台中遇到多个错误......所以我一定误解了......

<script>
$(document).ready(function () {
var table;
    $("#btnCheck").click(function () {
        $('#data').DataTable({
            dom: 'Bfrtip',
            buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ],
            "ajax": function (data, callback, settings) {
                $.ajax({
                    url: 'https://localhost:44328/api/employee-data',
                    dataType: "JSON",
                    success: function (data) {
                            var o = {"data":[]};
                            for(var i in data.data)
                            {
                                var row = [data.data[i].empID,data.data[i].empSA];
                                o.data.push(row);
                            }
                            callback(o);
                    }
                })
            }
        })
    });
        $('#AddRow').on('click', function () {
        table.row.add( [] ).draw();
    } );
    $('#AddRow').click();
});
</script>

编辑 2
这是我的 HTML

<div id="dtTapCount">
<table id="data" class="display nowrap" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>EmpID</th>
        <th>EmpSA</th>
    </tr>
</thead>
</table>
</div>

Answer 1

尝试在 scope 之外实例化var table 。 并在AddRow事件中调用它来添加行。
Go 到DataTables 文档有更多关于如何添加行的信息。

var table;
$(document).ready(function () {
    $("#btnCheck").click(function () {
        table = $('#data').DataTable({
            dom: 'Bfrtip',
            buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ],
            "ajax": function (data, callback, settings) {
                $.ajax({
                    url: 'https://localhost:44328/api/employee-data',
                    dataType: "JSON",
                    success: function (data) {
                        var o = {"data":[]};
                        for(var i in data.data)
                        {
                            var row = [data.data[i].location,data.data[i].tapCount];
                            o.data.push(row);
                        }
                        callback(o);
                    }
                })
            }
        });
    });
    $('#AddRow').on('click', function () {
        table.row.add(['' /* Location */, 0 /*Tap count */]).draw();
    });
    //$('#AddRow').click(); This is going to be called when AddRow button pressed.
});