How to reload angularJs ng-table

Question

I have an ng-table. I have multiple ng-tables inside one controller. I am giving dynamic attributes i.e. ng-table="tableParams2" or ng-table="tableParams3" etc. to them. I am making an ajax request on button click function to update the data. My http request is being sent at backend. By after I click 3-4 times, I see in console my table is reloaded. By after data, my data remains constant, I don't see the reloaded content in table. Below is my code:

Html:

<button ng-click="qualifyX(2)" ></button>

<div class="dragable modal hide fade ui-draggable in" id="ptn_popup" aria-hidden="false" data-backdrop="false">
<div class="modal-header">
    <a class="close" data-dismiss="modal" data-original-title="" title="">×</a>
    <h4>Possible matched Companies</h4>
</div>
<div class="modal-body" style="padding: 10px;">
    <div id="ptn_qualify_res" class="grid-view">
        <div class="summary"></div>
        <table ng-table="tableParams2" show-filter="true" class="items table table-striped table-bordered table-condensed">
            <tr ng-repeat="business in $data">
                <td data-title="'Primary Trading Name'" sortable="'primary_trading_name'" filter="{ 'primary_trading_name': 'text' }">
                    {{business.primary_trading_name}}
                </td>
                <td data-title="'Primary Entity Name'" sortable="'primary_entity_name'" filter="{ 'primary_entity_name': 'text' }">
                    {{business.primary_entity_name}}
                </td>
                <td data-title="'Business Name(s)'" sortable="'business_names'" filter="{ 'business_names': 'text' }">
                    {{business.business_names}}
                </td>
                <td data-title="'Other Trading Name(s)'" sortable="'other_trading_names'" filter="{ 'other_trading_names': 'text' }">
                    {{business.other_trading_names}}
                </td>
                <td data-title="'State'" sortable="'state'" filter="{ 'state': 'text' }">
                    {{business.state}}
                </td>
                <td style="width:70px;">
                    <a data-dismiss="modal" href="javascript:void(0)" data={{business.business_id}} class="ptn_qualify_view_link">
                        <button type="button" class="btn btn-mini"><i class="icon-eye-open"></i> View &nbsp;</button>
                    </a>
                </td>
            </tr>
        </table>
    </div>
</div>
<div class="modal-footer">
    <a data-dismiss="modal" class="btn" id="yw11" href="javascript:void(0);" data-original-title="" title="">Close</a>
</div>
</div>

App.js

$scope.qualifyX = function(busID) {
    var penModal = $('#popups_container' + busID + ' #pen_popup');
    var pen = $('#popups_container' + busID).next().find('input#Custombusiness_primary_entity_name').val();
    var selectors = {pen: pen, penModal: penModal};
    $http.get(getPtnData + '?ptn=' + selectors.ptn).success(function(data) {
        selectors.ptnModal.find('#ptn_qualify_res').removeClass('grid-view-loading').addClass('grid-view');
        $scope['tableParams' + busID] = new ngTableParams(
                {
                    page: 1, // show first page
                    count: data.length, // count per page
                    sorting:
                            {
                                primary_trading_name: 'asc'     // initial sorting
                            }
                }, {
            total: 0, // length of data
            getData: function($defer, params) {
                var filteredData = params.filter() ?
                        $filter('filter')(data, params.filter()) :
                        data;
                var orderedData = params.sorting() ?
                        $filter('orderBy')(filteredData, params.orderBy()) :
                        data;

                params.total(orderedData.length); // set total for recalc pagination
                $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
        }); 
    });
};

Create a somewhat similar Plunker, on every click I want to reload the table with new data.

Arundell

Could it be your backend caching the request? I've seen similar behaviour before, and IE is by far the worst, often not even sending a request to the backend – Spaceless

In my console, I see that request is being sent to backend and the response is new, But when I look at console, I no longer see ngTable: reload data message.. – Arundell

@thsorens: I solved this problem by adding $scope['tableParams' + busID] = []; line, before my $http function, which actually clears the data. Now, Only problem left is: ng-table uses $data variable, so when we use say 5 tables inside one controller, we see ngTable: reload data message 5 times.. – Arundell

Answer 1

I was having a very similar problem where my table was rendering but not reloading upon an action. What you need to do is to reload $scope.tableParams every time your button is clicked. A simple way to do this is to wrap $scope.tableParams.reload() in a function, and then call that function when the button is clicked.

controller code:

$scope.doSearch = function () {
    $scope.tableParams.reload();
}

html code:

<button ng-click="doSearch()">Search</button>

Neale

Answer 2

I resolved finally the problem.

When I received the update data for the table it's necessary reload the table as follows:

$scope.tableData = data;

$scope.tableParams.total($scope.tableData.length);
$scope.tableParams.reload();

Baptiste

Answer 3

in case anyone else hits this. I created my own filter that creates a new size array.

I used

$scope.tableParams.total(data.length)

to update the length before reloading the table.

Amulet

Answer 4

This code works for me , write it in your function- where you get your dynamic data

  $scope.tableParams.reload();
  $scope.tableParams.page(1);
  $scope.tableParams.sorting({});

Antihero