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.

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 — thsorens
– thsorens, Commented Apr 22, 2014 at 19:21
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.. — Vishal Khode
– Vishal Khode, Commented Apr 22, 2014 at 19:23
@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.. — Vishal Khode
– Vishal Khode, Commented Apr 22, 2014 at 20:21

Daniel F · Accepted Answer · 2014-04-28 16:20:32Z

26

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>

answered Apr 28, 2014 at 16:20

Daniel F

6197 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fran Herrero · Accepted Answer · 2015-03-18 12:26:06Z

12

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

answered Mar 18, 2015 at 12:26

Fran Herrero

3553 silver badges10 bronze badges

Comments

edi9999 · Accepted Answer · 2014-05-27 12:33:32Z

7

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.

edited May 27, 2014 at 12:33

edi9999

20.7k15 gold badges98 silver badges136 bronze badges

answered May 27, 2014 at 12:12

adil

1036 bronze badges

Comments

Krishna · Accepted Answer · 2016-10-04 18:07:02Z

0

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

answered Oct 4, 2016 at 18:07

Krishna

214 bronze badges

Collectives™ on Stack Overflow

How to reload angularJs ng-table

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related