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?

Answer 1

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()));
                }
            });

Answer 2

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.

Answer 3

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.