CODEWITHSUNDEEP
angularjspaginationsmart-table
Yaugy
Yaugy

Reputation: 11

Angular smart table pagination

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>

  1. 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

Upvotes: 0

Views: 3399

Answers (3)

Ashish Mukarne
Ashish Mukarne

Reputation: 841

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>

Upvotes: 0

K.Aalaa
K.Aalaa

Reputation: 1

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: Screenshot

Response from :Laurent R

Upvotes: 0

barış &#231;ıracı
barış &#231;ıracı

Reputation: 1043

<!--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>

Upvotes: 1

Related Questions