Angularjs pagination using smart table
Using angular smart table how do I get the result using the offset value. For example, I have 100 records in a database
- I first need to get 20 records from the database and only display 10 items per page.
- After clicking the third page, you need to query the database (service call) and get 20 more records..etc (but not the server call for the 2nd page)
I am using smart table pipe / ajax plugin to display posts.
How to achieve 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/
in Plunker
source to share
You need to add st-safe-src="tablecollection"
as wellst-table=tablerow
Then
<tr ng-repeat="row in tablerow">
FMI, source: Client side pagination not working on smart table
source to share
-
Set the page size to 10.
-
Maintain a service level array object (var fetchedData) for fetched rows from the server.
-
Only the server is called if the required amount of data is not available on the client side.
-
Always filter pagination data from selected data.
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
source to share