angularjsangularjs-directivepaginationangularjs-scopesmart-table

smart-table - custom pagination


I am using smart-table plugin for pagination.

My requirement is- i am fetching 100 records from database while loading and records per page is 10. So, number of pages would be 10 in pagination.

Now, i want when i click on the page number 10 (from pagination) then i want to fetch the another 100 records from database & then those new 100 records will append in the table ( total records in table would be 200 and page number would be 1 to 20 in the pagination) and same for when i click on page number 20, another 100 records fetch from database and so on.


Solution

  • What I understood from your question is that you want the table rows to stack on one another instead of being replaced when you navigate on the paginator.

    First of all, you don't need to use the default pagination, you can put your own custom markup in the <tfoot> tags

    Second, if you want to show different amounts of rows on click, you could use the limitTo filter on the ng-repeat

    Here's a plunk showing how I've added buttons that change the amount of rows being displayed on the table. you can use this logic (and functions) on your own template, just fetch the page number you going for, multiply by 10, and set that number as the amount you want to see