Angular smart table pagination

Question

I am currently using : "angular-smart-table": "2.1.0" "angular": "1.3.15"

When clicking on Smart table item, my application display item details in another page. After visiting the item page i want to go back on the smart table page on the same pagination number (2 on the screenshot) : Screenshot

My problems :

1. Don't know how to save currentPage (rootscope, paramter ?)

Here is the pagination view, which manage pagination :

<nav ng-if="pages.length >= 2">
<ul class="pagination">
    <li><a ng-click="selectPage(1)" class="download">Début</a></li>
    <li><a ng-click="selectPage(currentPage - 1)" class="download">&lt;</a></li>
    <li><a><page-select></page-select> / {{numPages}}</a></li>
    <li><a ng-click="selectPage(currentPage + 1)" class="download">&gt;</a></li>
    <li><a ng-click="selectPage(numPages)" class="download">Fin</a></li>
</ul>

2. Don't know how to call function "selectPage()" of the smartTable directive.

pageSelect Directive in 'smart-table-plugin-directive.js' :

.directive('pageSelect', function () { return { restrict: 'E', template: '<input id="test" type="text" class="select-page" ng-model="inputPage" ng-change="selectPage(inputPage)">', link: function (scope, element, attrs, $rootscope) { scope.$watch('currentPage', function (c) { scope.inputPage = c; scope.$root.page = c; }); } } }

Thanks for responding

Y@ugy

Answer 1

<!--HTML-->
<table st-table="displayedUsers" st-safe-src="users" class="table table-hover  table-striped" style="background-color:white ">
  <thead class="bg-light panel-heading lter b-b ">
            ...<!--You can write your column name-->
  </thead>
  <tbody>
            ...<!--You can write your table info-->
  </tbody>
  <tfoot>
    <tr>
      <td colspan="10" class="text-left">
        <div st-items-by-page="10" st-pagination=""></div>
      </td>
    </tr>
  </tfoot>
</table>

Answer 2

You can follow the example of stPersist directive:

http://plnkr.co/edit/ekwiNt?p=previewStPersist example

1) you watch the table state and persist it somewhere (service, localstorage, session,etc) whenever it changes.

2) When the table is restored you read the value from your storage and call the slice function of the table controller

example:

Response from :Laurent R

Answer 3

after experimenting lot of examples and practice I found best and easy to implement library to use data table in angularJS projects which provide,

1. sorting,
2. filtering
3. selection,
4. custom template,
5. editable,
6. pagination
7. searching,
8. themes,
9. column resizing,
10. draggable columns

http://ekokotov.github.io/object-table/

<table  object-table
	from-url = "http://beta.json-generator.com/api/json/get/DXXROxj"
	data = "exportDataVariable"
	display = "10"
	headers = "Name, Eye color, Age,Balance,Company,Favorite Fruit"
	fields = "name,eyeColor,age,balance,company,favoriteFruit"
	sorting = "compound"
	editable = "true"
	resize="true"
	drag-columns="true">
</table>