AngularJS and DataTables

Wilshire

I'm using an old version of AngularJS (1.7.7) and DataTables (1.10.20). I wire the table up like this:

<table ng-if="model.ItemExists" ui-jq="dataTable" ui-options="dataTableOptions" id="search-results" class="display nowrap datatable cell-borders" style="width: 100%;">

The "ui-jq" attribute allowed me to use custom options for DataTables:

$scope.dataTableOptions = { dom: "lfBrtip", lengthMenu: [[25, 50, -1], [25, 50, "All"]], language: { emptyTable: 'No items matched your search criteria' }, buttons: [ { text: 'Export', className: 'button button:hover', extend: 'csv' } ] };

There's a search options section with a button that calls the following AngularJS function:

`$scope.getItemHistory = function () {

$http({
    method: 'GET',
    url: $scope.getUrl('/My/Search/Url'),
    params: {
        firstParam: $scope.model.FirstValue,
        secondParam: $scope.model.SecondValue, 
        thirdParam: $scope.model.ThirdValue
    }
}).then(function successCallBack(response) {

    $scope.model.SearchResults = response.data;

}, function errorCallback(response) {

    alert("There was an error gathering the item's information. Please try again");
});

};`

"SearchResults" is a model that contains a few bits of important data and the rows returned from the query. Works great the first go-around.

The kicker is when I perform a second search. If I modify the search params and run it again, the extra rows are added to the DataTables table, but the info area isn't updated, and if I change the length menu, the extra rows disappear. I'm perplexed as to why the first search performs as expected, but any subsequent searches fail. I've checked the model result as it gets sent back to the view, and it's correct and valid JSON. It appears that DataTables isn't updating itself correctly when I don't use either a POST MVC view model or wire up an ajax function to retrieve the data.

I've tried making calls to "ajax.reload()", but "ajax" is null. I've tried all manner of hoops and jumps to get around this, but I'e come up with nothing.

colin

ajax.reload() is only relevant if you're loading the data from Ajax initially. It sounds like your table is being added to by the search results, rather than replacing them. You could try rows().delete() to clear it out, or re-initialise the table with destroy or destroy with destroy().

Colin

Wilshire

Thanks for the quick reply. I'm running into some issues trying your suggestions. When I try to delete the rows I get an exception that "rows(...).delete is not a function". I'm using this code:

`if ($.fn.DataTable.isDataTable("#search-results")) {

            var dt = $("#search-results").DataTable();
            dt.rows(".ng-scope").delete();
        }`

I also tried it without the class specified as a param - same result. I tried destroying and re-creating the DataTable, but had no luck that way, either. Here's my code using destroy:

`if ($.fn.DataTable.isDataTable("#search-results")) {

            var dt = $("#search-results").DataTable();
            dt.destroy();

            angular.element(document).ready(function () {
                dataTable = $('#search-results');
                dataTable.DataTable();
            });
        }

        $scope.model.SearchResults = response.data;`

This resulted in the same problem I had when I wasn't calling destroy, except that now my custom options are also removed and would have to be reassigned. It's hard for me to believe that combining AngularJS with DataTables is so difficult. Works great the first query, but another query yields strange results. Is there an example anywhere of someone refreshing DataTables rows when its data is obtained from AngularJS?