1. 首页
  2. 文章列表
  3. 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>{{row.Title}}</span>
                <div ng-class="Title.$invalid && Title.$dirty ? 'has-error' : ''" ng-switch-when="true">
                    <div class="fg-line">
                        <input type="text" name="name" ng-model="row.Title" class="form-control input-sm" required/>
                    </div>
                </div>
            </td>
            <td title="'链接'" filter="{Url: 'text'}" sortable="'Url'" ng-switch="row.isEditing" ng-class="Url.$dirty ? 'bg-warning' : ''" ng-form="Url" tracked-table-cell>
                <span ng-switch-default>
                    <a href="{{row.Url}}" target="_blank">{{row.Url}}</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();
		});
	};

最后的效果:

懒得勤快的博客_全栈开发者_互联网分享精神

文章历史版本:

修改次数:1 次 查看历史版本

版权声明:

本文仅用于学习、研究和交流目的,欢迎非商业性质转载。本文链接:https://masuit.com/104

l  博主在此发文(包括但不限于汉字、拼音、拉丁字母)均为随意敲击键盘所出,用于检验本人电脑键盘录入、屏幕显示的机械、光电性能,并不代表本人局部或全部同意、支持或者反对观点。如需要详查请直接与键盘生产厂商法人代表联系。挖井挑水无水表,不会网购无快递。

l  文章内容部分来源于互联网,不代表本人的任何立场;涉及到的软件来源于互联网,仅供个人下载使用,请勿用于商业用途,版权归软件开发者所有,下载后请于24小时内删除,请支持正版!因下载本站任何资源造成的损失,全部责任由使用者本人承担!如果你是版权方,认为本文内容对您的权益有所侵犯,请联系博主,待博主进行严格地审查和背景调查后,情况属实的将在三天内将本文删除或修正。

l  博主的文章没有高度、深度和广度,只是凑字数。由于博主的水平不高(其实是个菜B),不足和错误之处在所难免,希望大家能够批评指出。

l  博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己的纯镀 24k 文章,请原谅博主成为一个无耻的文档搬运工!

l  博主只是一名普通的互联网从业者,不懂修电脑,不会卖电脑,不会帮你盗号,不会破解开机密码,找不回你丢失的手机等,如有这样的想法请绕道!

相关推荐:

web前端知识体系大全 web前端杂谈:传统的 Ajax 已死,Fetch得永生!
在angular中集成SignalR即时通信框架 大前端的未来可能代替ajax的东西——Fetch API初体验
解决代码着色组件SyntaxHighlighter长代码不换行以及行号显示错位的问题 自从用了linqjs,再也不用担心操作json集合啦
通过引用TypeScript定义来提高你的Javascript开发能力 又一前端神级类库——lodash.js工具库

评论区:

    还没有评论哦,赶紧来写评论吧

    分享按钮