CODEWITHSUNDEEP
htmlangularjspaginationgrid
Hello
Hello

Reputation: 403

AngularJS trNgGrid custom page size for pagination

I am working on creating an Angular table using trNgGrid. Its working ok, but I need to implement custom pagination, meaning user should be able to pick the number of page-items for display per page.

I went through the TrNgGrid Global Options here: https://moonstorm.github.io/trNgGrid/release/#/GlobalOptions

But am not sure how and where do I set this attribute "filtered-items-page" to achieve the custom pagination and how it will talk with the HTML input for the same. As suggested on the site, I assigned an empty array for it on the html-table tag as mentioned in the example, but that doesn't help much.

Here is my JS:
...
 $scope.pageItemsCount = 10;
 ..
 $scope.$watchCollection("pageItemsCount", function(){
 // This is not being triggered when the page count changes through the HTML control-box as displayed on their demo page.           
 alert('pageItemsCount has changed, new value is: ' + $scope.pageItemsCount)
        });
..
..

My HTML: 
..
<table tr-ng-grid="" items="myItems" selected-items="selectedItems" selection-mode="None" page-items="pageItemsCount" filtered-items-page="[]">
..
<div class="form-group">
   <label class="col-md-7 control-label"">Items displayed per page :</label>
        <div class="col-md-2">
            <input class="form-control ng-valid ng-valid-min ng-touched ng-valid-number ng-dirty" type="number" ng-model="pageItemsCount" min="1"/>
        </div>
</div>

Just to be clear, this is the feature I want: enter image description here

Am quiet new toAngularJS and trNgGrid, will appreciate any advice on this greatly.

Thank you!

Upvotes: 1

Views: 774

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222682

You can set the pagination with

<table class="table table-bordered" tr-ng-grid=""
      items="gridSettings.data" page-items="gridSettings.pageSize"
      current-page="gridSettings.currentPage" selection-mode="gridSettings.selectionMode">

and set the options in controller as,

  $scope.gridSettings = {
      pageSize: 100,
      currentPage: 0,
      enableSorting: false,
      selectionMode: 'None',
      totalItems: $scope.myItems.length,
      data: $scope.myItems
    };

you can set pageSize based on model variable.

Here is the WORKING DEMO

Upvotes: 2

Related Questions