angular表格神器ng-table的服务端分页的解决方案

西瓜柚子冰

　　背景：
　　目前博客系统项目的后台管理框架使用的是Angularjs，在做数据展示的时候，使用的是ng-table。用过ng-table的人都知道，他是自带分页的，默认分页方式是假分页。也就是一口气把所有的数据从数据库里取出来，然后再进行分页。这样做的好处是，在分页时候，不需要频繁访问数据库，减少数据库压力。同时，也能够提高翻页速度，提升用户体验。这些功能都是自带的，对于开发人员只要做一些简单的配置就好了。节约不少开发时间。这种方式在数据不多，查询不慢的情况下，效果很好，但是一旦数据多，查询慢了，体验会很差。就好比我这次，本身查询就会有些慢，再加上数据有几万条。所以ng-table每一次加载需要1分钟的时间。用户体验很差。所以，我必须考虑使用服务端分页。
　　遇到的问题：
　　网上查了很多资料，自己也试了很多。有件事情想要说下。经过我个人测试，发现ng-table是无法做到服务端分页的。之前还天真的以为，通过ng-table的一些配置，加上Angularjs的watch方法，对页码进行监听。就可以进行分页。后来发现这样的想法有一个无法跨过的坎。那就是，ng-table的数据和它自带的分页控件是强关联的。什么意思？
　　打个比方，如果我一页10行，当我翻到第二页的时候，显示的是第11-第20条数据。如果是服务端的分页方式，我就需要把页码设置在第二页，数据则是从服务端取出第11-第20条。其实，我提供给ng-table的数据源里面只有10条数据。所在设置的时候，虽然我可以将页码设置成第二页。但是，ng-table在取数据的时候，会取他数据集里面的第11-第20条，可因为，我是服务端的分页方式，其实数据集中只有10条数据。它是根本无法取到数据集中第11-第20条数据的。所以，ng-table的页码和数据集是紧密关联。无法分开单独设置。这也就是为什么，他不能做服务端分页的原因。
　　--以上是我自己总结的结果，如果大家测试下来和我有不一样的结果，还请大家指正----------------------------------------------------
　　解救方案：
　　搜索了半天，有一个帖子给了我一点方向。http://www.cnblogs.com/sword-successful/archive/2015/06/28/4605222.html，网上有很多都是引用的这个方式，但是按照他上面说的方法，我是没有成功过。而且，下面的百度云盘也是无法使用的。不过，给我指明一个方向，就是使用tm.pagination.js插件。接下来说方法。
　　1. 下载tm.pagination.js，https://github.com/317482454/tm.pagination
　　2.在需要分页的html页面中，引用<script src="~/js/tm-pagination/tm.pagination.js"></script>，这里注意引用的先后顺序，是先引用angular.min.js，再引用ng-table和tm.pagination.js，最后引用controller的js
　　<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
　　<script src="~/Scripts/ng-table.min.js"></script>
　　<script src="~/Scripts/tm.pagination.js"></script>
　　3.在你html页面中，需要分页的ng-table下面添加<tm-pagination conf="paginationConf"></tm-pagination>
　　<table ng-table="list.tableParams" class="table table-bordered table-hover table-condensed" ng-form="list.tableForm" disable-filter="list.isAdding" tracked-table="list.tableTracker">
　　<tr ng-repeat="row in $data" ng-form="rowForm" tracked-table-row="row">
　　<td title="'联系方式'" filter="{Title: 'text'}" sortable="'Title'" ng-switch="row.isEditing" ng-class="Title.$dirty ? 'bg-warning' : ''" ng-form="Title" tracked-table-cell>
　　<span ng-switch-default></a>
　　</span>
　　<div ng-class="Url.$invalid && Url.$dirty ? 'has-error' : ''" ng-switch-when="true">
　　<div class="fg-line">
　　<input type="text" name="name" ng-model="row.Url" class="form-control input-sm" required/>
　　</div>
　　</div>
　　</td>
　　<td title="'操作'">
　　<button class="btn btn-primary btn-sm" ng-click="list.save(row， rowForm)" ng-if="row.isEditing" ng-disabled="rowForm.$pristine || rowForm.$invalid">
　　<span class="glyphicon glyphicon-ok"></span>
　　</button>
　　<button class="btn btn-default btn-sm" ng-click="list.cancel(row， rowForm)" ng-if="row.isEditing">
　　<span class="glyphicon glyphicon-remove"></span>
　　</button>
　　<button class="btn btn-default btn-sm" ng-click="row.isEditing = true" ng-if="!row.isEditing">编辑</button>
　　<button class="btn btn-danger btn-sm" ng-click="list.del(row)" ng-if="!row.isEditing">删除</button>
　　</td>
　　</tr>
　　</table>
　　<tm-pagination conf="paginationConf"></tm-pagination>
　　4.注入tm.pagination.js，var app = angular.module('App'， ['tm.pagination']); // 创建应用域，并且注入tm.pagination
　　var myApp = angular.module('myApp'， [...， "tm.pagination"]);
　　5.在Angularjs的controller中初始化，分页控件，并且编写分页方法。
　　$scope.paginationConf = {
　　currentPage: $scope.currentPage ? $scope.currentPage : 1，
　　itemsPerPage: 10，
　　pagesLength: 25，
　　perPageOptions: [1， 5， 10， 15， 20， 30， 40， 50， 100， 200]，
　　rememberPerPage: 'perPageItems'，
　　onChange: function () {
　　self.GetPageData($scope.paginationConf.currentPage， $scope.paginationConf.itemsPerPage);
　　}
　　};
　　this.GetPageData = function (page， size) {
　　$scope.loading();
　　$http.post("/contact/getpagedata"， {
　　page，
　　size
　　}).then(function (res) {
　　$scope.paginationConf.currentPage = page;
　　$scope.paginationConf.totalItems = res.data.TotalCount;
　　$("div[ng-table-pagination]").remove();//将ng-table原有的分页条去除掉
　　self.tableParams = new NgTableParams({
　　count: 50000//将ng-table原有的页大小设置成一个很大的数字
　　}， {
　　filterDelay: 0，
　　dataset: res.data.Data
　　});
　　source = angular.copy(res.data.Data);
　　$scope.loadingDone();
　　});
　　};
　　最后的效果：

                               
登录/注册后可看大图

吖头ii

支持你哈...................................

家家顺小伍

看帖要回，回帖才健康，在踩踩，楼主辛苦了！

蕞后旳牵强

鼎力支持！！

zhangfenfen

发发呆，回回帖，工作结束~

ccddmmaa2

顶起顶起顶起

q3315031

支持支持再支持

洛阳鑫鑫

为保住菊花，这个一定得回复！

淡淡的心

是爷们的娘们的都帮顶！大力支持

jeff8

我也是坐沙发的