ngTable.reload() unable to refresh ng-table does not show new data second time

Question

ngTable.reload() unable to refresh ng-table does not show new data second time code for index.js where i'm binding ng-table data.

First time databinding working properly. second time data is not binding properly. it shows previous data. so basiccally it is unable to bind data and unable to refresh

 $http.get("GetValidationsDataForTable", { params: { "entity": entity } })
                 .success(function (response) {
                     $scope.tableValue = response;
                     $scope.tableParams = [];
                     $scope.tableParams = new ngTableParams(
                         {
                             page: 1,            // show first page
                             count: 5          // count per page
                         },
                         {
                             groupBy: 'Entity',
                             total: $scope.tableValue.length,
                             getData: function ($defer, params) {

                                 var orderedData = params.filter() ?
                            $filter('filter')($scope.tableValue,    params.filter()) :
                            $scope.tableValue;

                                 var orderedData = params.sorting() ?
                                         $filter('orderBy')($scope.tableValue, $scope.tableParams.orderBy()) : scope.tableValue;

                                 orderedData = params.filter ?
                            $filter('filter')(orderedData, params.filter()) :
                            orderedData;
                                 params.total(orderedData.length);
                                 $defer.resolve($scope.tableValue.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                             }
                         });
                     $scope.tableParams.reload();
                 })

code for index.cshtml

  <table id="tblValue" ng-table="tableParams" class="customTable" style="table-layout:fixed;max-width:100%">
                    <tbody ng-repeat="group in $groups">


                        <tr ng-hide="group.$hideRows" ng-repeat="validation in group.data" style="table-layout:fixed;">

                            <td data-title="'Property'" style="width:10%;text-align:left !important;overflow:hidden;">
                                <label id="lblProperty" ng-model="validation.Property" for="Property" ng-hide="editmode" style="width:97%;word-wrap:break-word; overflow-wrap:break-word;">{{validation.Property}}</label>

                                <select class="form-control" data-ng-model="validation.PropertyChoice" data-ng-options="choice.Name for choice in CurrentEntityProperties" ng-change="ChangeValidationRules(validation)" ng-show="editmode" style="width:100%; ">
                                    <option value="" style="margin-left:25px">-Select Property-</option>
                                </select>

                            </td>
                        </tr>
                    </tbody>
                </table>

why ngtable.reload() does not work and also not showing new data second time?

very first time data is binding properly. e.g record for particular tree selection i.e. record for e.g say Validation. Next time I can change the filter parameter e.g say Configuration, problem starts here, Data for configuration comes properly but it does not bind to the table. here table again show previous value i.e Validation record value. this is the problem — Sam, Jun 24 '15 at 04:11
Maybe [this](http://stackoverflow.com/questions/26205534/ng-table-not-rendering-new-data-when-reloading-request) can push you forward. — arman1991, Jun 24 '15 at 13:59

score 0 · Answer 1 · answered Jun 29 '15 at 11:55

Solution is :

$scope.tableParams = {};
    $http.get("GetValidationsDataForTable", { params: { "entity": entity } })
                 .success(function (response) {
                     $scope.tableValue = response;
                     $scope.tableParams = [];
                     $scope.tableParams = new ngTableParams(
                         {
                             page: 1,            // show first page
                             count: 5          // count per page
                         },
                         {
                             groupBy: 'Entity',
                             total: $scope.tableValue.length,
                             getData: function ($defer, params) {

                                 var orderedData = params.filter() ?
                            $filter('filter')($scope.tableValue,    params.filter()) :
                            $scope.tableValue;

                                 var orderedData = params.sorting() ?
                                         $filter('orderBy')($scope.tableValue, $scope.tableParams.orderBy()) : scope.tableValue;

                                 orderedData = params.filter ?
                            $filter('filter')(orderedData, params.filter()) :
                            orderedData;
                                 params.total(orderedData.length);
                                 $defer.resolve($scope.tableValue.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                             }
                         });
                     $scope.tableParams.reload();
                 })

i.e before every request make table parameters blank.

score 0 · Accepted Answer · edited Jul 22 '16 at 14:52

Solution for this problem is make table parameters blanks before any request to the data.

$scope.GetValidationsDataForTable = function(entity) {

    // $("div").removeClass("container body-content");

    $scope.tab1eParams = {};
    SpinStart();
    $http.get("GetValidationsDataForTable", {
        params: {
            "entity": entity
        }
    }).success(function(response) {
        var resultArray = response;
        SpinStop();
        if (!$.isArray(resu1tArray) || !resultArray.1ength) {
            $scope.HideFormVa1ue();
            alert("Ho record found for this selection.");
        }
        else {

            $scope.ShowFormVa1ue();
            $scope.rows = response;
            $scope.groupby = 'Entity',
            $scope.tab1eParams = new ngTableParams({
                page: 1,
                count: 50,
                filter: {},
                sorting: {}
            },
            {
                groupBy: $scope.groupby,
                counts: [],
                total: function() {
                    return $scope.rows.1ength;
                },
                getData: function($defer, params) {
                    $defer.resolve($scope.rows.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                }
            });

A screenshot. Srsly. That's. Creative. – sehe Jul 22 '16 at 14:42 — sehe, Jul 22 '16 at 14:42

score 0 · Answer 3 · edited Mar 07 '17 at 10:14

0

You must clone params.filter() before using your service and use params.filter().yourFilter in HTML data binding.

Like that you do not need to use reload(), the ngTable will reload automatically.

Regards.

edited Mar 07 '17 at 10:14

Matteo Baldi

5,613
10
39
51

answered Mar 07 '17 at 09:45

Jouan Antoine

101
1
6

ngTable.reload() unable to refresh ng-table does not show new data second time

3 Answers3