angularjs pagination using smart table

Question

By using angular smart table, how do i get the result set by using offset value. For example, I have 100 records in the database

First i need to get 20 records from database and to display only 10 items per page.
After clicking the 3rd page, need to query the database(service call) and get the another 20 records..etc(but no server call for 2nd page)

I am using smart table pipe/ajax plugin to display the records.

How to achieve using this.

<div class="table-container" ng-controller="pipeCtrl as mc">
            <table class="table" st-pipe="mc.callServer" st-table="mc.displayed">
                <thead>
                <tr>
                    <th st-sort="id">id</th>
                    <th st-sort-default="reverse" st-sort="name">name</th>
                    <th st-sort="age">age</th>
                    <th st-sort="saved">saved people</th>
                </tr>
                <tr>
                    <th><input st-search="id"/></th>
                    <th><input st-search="name"/></th>
                    <th><input st-search="age"/></th>
                    <th><input st-search="saved"/></th>
                </tr>
                </thead>
                <tbody ng-show="!mc.isLoading">
                <tr ng-repeat="row in mc.displayed">
                    <td>{{row.id}}</td>
                    <td>{{row.name}}</td>
                    <td>{{row.age}}</td>
                    <td>{{row.saved}}</td>
                </tr>
                </tbody>
                <tbody ng-show="mc.isLoading">
                <tr>
                    <td colspan="4" class="text-center"><div class="loading-indicator"></div>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td class="text-center" st-pagination="" st-items-by-page="5" colspan="4">
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>

http://lorenzofox3.github.io/smart-table-website/

code in the Plunker

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

score 3 · Answer 1 · edited May 23 '17 at 11:53

3

You need to add st-safe-src="tablecollection" as well as st-table=tablerow

Then,

<tr ng-repeat="row in tablerow">

FMI, source: Client side pagination not working in smart table

edited May 23 '17 at 11:53

Community

1
1

answered Sep 29 '15 at 07:53

Blacky

31
2

score -1 · Answer 2 · answered Jul 16 '15 at 06:04

Set the page size to 10.
Maintain a service level array object (var fetchedData) for the fetched rows from the server.
Only call the server if the required amount of data not available in the client side.
Always filter the data for the pagination from fetchedData.

Something like this in your service.

    var fetchedData = [];

    function getPage(start, number, params) {

        if (fetchedData.length < (start + number)) {
            //get the next 20 rows from the server and add to fetchedData;
        }

        var filtered = params.search.predicateObject ?
            $filter('filter')(fetchedData, params.search.predicateObject) :
            fetchedData;
        //rest of the logic

angularjs pagination using smart table

2 Answers2