DataTables with AngularJS 1.7

DataTables with AngularJS 1.7

WilshireWilshire Posts: 7Questions: 5Answers: 0

My project is using an older version of AngularJS in ASP.NET MVC, and I'm having some trouble using it with DataTables. The

<

table> tag is created like this:

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

Here's the code in my AngularJS controller:

`$scope.getMaterialHistory = function (model) {

    $http({
        method: 'POST',
        url: $scope.getUrl('/My/Method/Url'),
        data: { model: $scope.model }
    }).then(function successCallBack(response) {

        $scope.model.searchResults = response.data;

    }, function errorCallback(response) {
        alert("There was an error gathering theinformation. Please try again");
    });
};

$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'
        }
    ]
};`

This works great... on the first "GET" operation. This part of the app is a search form with options that can be changed. If I change the options and click the submit button again, the search executes and I get more data, but my table is updated incorrectly. The length menu won't update with the new count of items in the table, and sometimes even shows I have zero results, when I have dozens of lines showing in the table. I can only think that it's not properly refreshing the data upon POST to the ASP.NET MVC controller method. I'm not sure how to fix this. Any suggestions?

Answers

  • allanallan Posts: 63,190Questions: 1Answers: 10,412 Site admin

    You might want to check out this third party integration library for Angular and DataTables.

    I'm afraid I haven't used Angular myself so I really can't offer much help in that regard I'm sorry to say. What you have above looks okay, so my guess is that Angular is changing the table node which is causing DataTables' referencing to go haywire.

    Allan

This discussion has been closed.