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: ，
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").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();
});
};
最后的效果：
http://ww3.sinaimg.cn/large/87c01ec7gy1fsq0m8uq46j21gw0asdgr.jpg 支持你哈................................... 看帖要回，回帖才健康，在踩踩，楼主辛苦了！ 鼎力支持！！ 发发呆，回回帖，工作结束~ 顶起顶起顶起 支持支持再支持 为保住菊花，这个一定得回复！ 是爷们的娘们的都帮顶！大力支持 我也是坐沙发的