How To Add Empty Row To DataTable

Question

I am using JQuery DataTables and attempting to add an empty row to the DataTable. I have the code below but a new empty row is not added.

How do I need to re-write this so that an empty row is added?

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

EDIT
I edited the code to this, but now I get multiple errors in the Console....so I must have mis-understood...

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

Edit 2
This is my 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

Try instantiate the var table outside of the scope. And in the AddRow event call it to add the row.
Go to the DataTables documentation there's more information about how to add rows.

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.
});