Angular 智能表格分页答案

【问题标题】：Angular smart table paginationAngular 智能表格分页
【发布时间】：2016-04-23 19:43:46
【问题描述】：

我目前正在使用： “角度智能表”：“2.1.0” “角度”：“1.3.15”

单击智能表项时，我的应用程序会在另一个页面中显示项详细信息。访问项目页面后，我想返回相同分页号的智能表格页面（屏幕截图上的 2）： Screenshot

我的问题：

不知道如何保存 currentPage（rootscope，参数？）

这是管理分页的分页视图：

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

不知道如何调用 smartTable 指令的函数“selectPage()”。

'smart-table-plugin-directive.js' 中的 pageSelect 指令：

.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; }); } } }

感谢回复

Y@ugy

【问题讨论】：

标签： angularjs pagination smart-table

【解决方案1】：

在尝试大量示例和实践后，我发现在 angularJS 项目中使用数据表的最佳且易于实现的库提供，

排序，
过滤
选择，
自定义模板，
可编辑，
分页
搜索，
主题，
调整列大小，
可拖动的列

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>

【讨论】：

【解决方案2】：

你可以按照stPersist指令的例子：

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

1) 您观察表状态并将其保存在某处（服务、本地存储、会话等），只要它发生变化。

2）当表恢复时，您从存储中读取值并调用表控制器的切片函数

例子：

来自：Laurent R 的回应

【讨论】：

只有一个问题： +当我对整个表使用 WATCH 时，这会阻止 smarttable 中的其他 WATCH，然后我丢失了分页；而不是我在一个属性上使用一个特定的 WATCH，当我在表内/表外时它会改变值并且效果很好。

【解决方案3】：

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

【讨论】：