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.