Smart-table - page setup from code

Question

I use a very good Smart-table library to display my data.

I am using a custom pagination template. However, I would like to be able to install page 1 from the code. I read in the st-pipe directive that it provides, but it seems to me that I will need to rewrite all the filter / pagination / sorting code myself if I implement this.

I will try a simple way to programmatically set the page from outside the st-pagination directive that exists in my tfoot table

 <table st-table="displayedCollection" st-safe-src="tags" class="table table-hover"> <tbody> <tr st-select-row="tag" st-select-mode="single" ng-repeat="tag in displayedCollection" ng-click="click(tag)"> <td> <span editable-text="tag.name" e-placeholder="enter a display name..." e-name="name" e-form="editableForm" e-required> {{tag.name}}</span> </td> <td> <span editable-text="tag.path" e-placeholder="enter actual value to be used..." e-name="path" e-form="editableForm" e-required> {{tag.path}}</span> </td> <td> <form editable-form shown="newItem == tag" onshow="onShow()" name="editableForm" oncancel="oncancel(newItem)" onaftersave="saveForm(tag)"> <!-- EDIT --> <button type="button" class="btn btn-sm btn-default" ng-click="editableForm.$show()" tooltip="Edit" tooltip-placement="left" ng-hide="editableForm.$visible"> <i class="fa fa-pencil-square-o fa-lg"></i> </button> </form> </td> </tr> </tbody> <tfoot> <tr> <td colspan="1" class="text-left"> <div st-template="app/partials/pagination.html" st-pagination="" st-items-by-page="pager.itemsOnPage"></div> </td> <td colspan="1"> <div class="btn-group btn-group-sm pull-right ng-scope"> <button type="button" ng-class="{'active':pager.itemsOnPage==5}" ng-click="pager.itemsOnPage=5" class="btn btn-default">5</button> <button type="button" ng-class="{'active':pager.itemsOnPage==10}" ng-click="pager.itemsOnPage=10" class="btn btn-default">10</button> <button type="button" ng-class="{'active':pager.itemsOnPage==20}" ng-click="pager.itemsOnPage=20" class="btn btn-default">20</button> <button type="button" ng-class="{'active':pager.itemsOnPage==30}" ng-click="pager.itemsOnPage=30" class="btn btn-default">30</button> </div> </td> </tr> </tfoot> </table> 

I would like to be able to set the page from the <form> onshow .

Does anyone know if this is possible? Thank you very much.

Answer 1

To set the angular -smart-table page number from code, use the select-page () function to paginate.

If your HTML has a paginator element as follows:

 <div id="pagerId" st-pagination="" st-items-by- ... 

You can use this code in your directive.

 function setPage(pageNumber) { angular .element( $('#pagerId') ) .isolateScope() .selectPage(pageNumber); } 

You need to install jQuery to use $. I got the idea from the last example: http://lorenzofox3.imtqy.com/smart-table-website/