1

I've run into a problem with ng-table and pagination. Basically I have two datasets and the user can choose which is rendered in the table.

With dataset one there are 2 pages and with dataset two there is only one page. The issue now is that if I navigate to page 2 and then change to dataset 2, I get a blank table with no paging options.

Plunker created below in which you can test this: http://plnkr.co/edit/0D4ih7bPNf3Jz87Rymc7

My code is pretty much just a copy and paste from an ngtable example:

var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {

$scope.datasets = ["1","2"];
$scope.dataset = "1";
var data1 = [{name: "One", age: 50},
            {name: "Two", age: 43},
            {name: "Three", age: 27},
            {name: "Four", age: 29},
            {name: "Five", age: 34},
            {name: "Six", age: 43},
            {name: "Seven", age: 27},
            {name: "Eight", age: 29},
            {name: "Nine", age: 34},
            {name: "Ten", age: 43},
            {name: "Eleven", age: 27},
            {name: "Twelve", age: 29},
            {name: "Thirteen", age: 34},
            {name: "Fourteen", age: 43},
            {name: "Fifteen", age: 27},
            {name: "Sixteen", age: 29}];

var data2 = [{name: "Jacob", age: 50},
            {name: "Jacob", age: 43},
            {name: "Jacob", age: 27}];

var getData = function() {
    return $scope.dataset === "1" ? data1 : data2;
};
$scope.$watch("dataset", function () {
    $scope.tableParams.reload();
});         
$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10,          // count per page
    sorting: {
        name: 'asc'     // initial sorting
    }
}, {
    total: function () { return getData().length; }, // length of data
    getData: function($defer, params) {
        var filteredData = getData();
        var orderedData = params.sorting() ?
                            $filter('orderBy')(filteredData, params.orderBy()) :
                            filteredData;

        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    },
    $scope: { $data: {} }
});

});

Any ideas welcomed!

Thanks, Kevin.

1 Answer 1

2

http://plnkr.co/edit/Q3GLxP55bGgVB7I28kbY?p=preview

 $scope.$watch("dataset", function () {
          $scope.tableParams.$params.page=1;

            $scope.tableParams.reload();
        });
Sign up to request clarification or add additional context in comments.

1 Comment

Cool, that should work. I just came across another scenario I have that's a similar problem. Just one dataset but on each row there is a delete icon. If the user is on the second page and deletes all the rows they are again stuck. Any ideas on that one?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.