js datatable helper.

The following item is not working and not sure why.

1. I see the result set / value, but the first row shown 'No data available in table'
2. when I click on the <th></th> and try to sort, all data is disappeared.
3. when the table is loading (it may take 10 seconds just because of the large report),
where i can add the like ajax loading animated images? or how should I handle it?
4. The paging is not working. it shows every rows (10,000).
5. when I keep refresh the webpage, it keeps adding up the rows every 10,000

Thanks




 

 <table id="data-table" class="table table-bordered" width="100%">
                    <thead>
                        <tr>
                            <th>Row Count</th>
                            <th>id</th>
                        </tr>
                    </thead>
                </table>

 function test2() {
        $(document).ready(function () {
            $('#data-table').DataTable({
                "paging": true,
                "ordering": true,
                "info": false,
                "bProcessing": true,
                "bDeferRender": true,
                "pageLength": 50,
                "scrollY": 600,
                "bSort": true,
                "stateSave": true
            });
            var tr;
            var data = new Array();
            var x=0;
            $.ajax({
                url: "/Accounting/TestMe",
                type: "Post",
                data: JSON.stringify(data),
                dataType: 'json',
                success: function (data) {
                    $.each(data, function (index) {                        
                        tr = tr + "<tr>";
                        tr = tr + "<td>" + x + "</td>";
                        tr = tr + "<td>" + data[index].invoiceamount + "</td>";
                        tr = tr + "</tr>";
                        x = x + 1;
                    });
                    $('#data-table').append(tr);                    
                },                 
                error: function (msg) { alert(msg); }
            });
        });
    }

Select allOpen in new window