angularjs pagination using smart table

vishnu picture vishnu · May 11, 2015 · Viewed 22.3k times · Source

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

  1. First i need to get 20 records from database and to display only 10 items per page.
  2. 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

Answer

Blacky picture Blacky · Sep 29, 2015

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