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

最后的效果:

懒得勤快的博客_互联网分享精神

超级金刚电竞IPS显示器,最强2k旗舰,LM270WQA,[email protected] 1ms GTG [推广]

超级金刚电竞IPS显示器,最强2k旗舰,LM270WQA,2k@180Hz 1ms GTG

支持2k 144Hz 10bit HDR freesync/gsync同时开启,新驱动板对显示面板的色彩调校更加精确!功耗更低,更加节能!立即购买,享本站渠道专属优惠!

文章历史版本:

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

相关推荐:

web前端知识体系大全 [智能社]Javascript之Node.JS-经典教程_Node.js从理论到实战下载
慕课网Angular 4.0从入门到实战 打造在线竞拍网站 开课吧web全栈架构师第16期(2020完结)
开课吧2020年前端高级工程师04期视频教程 慕课2019 Web前端攻城狮就业班
博主开源项目——本站博客项目MyBlogs.Core,基于.NET 5 黑马程序员2019年前端就业班视频教程
价值15000元的web前端全栈工程师精英班视频教程 2020年2月最新 React Native基础教程(33天)

版权声明:

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

● 下载遇到问题,请先阅读网站公告!如遇资源报毒,请参阅:https://masuit.com/misc/14

● 文章内容仅供参考,所涉及的软件以具体使用情况为准!

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

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

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

● 文章内容部分来源于互联网,本站不代表任何立场;涉及到的软件来源于互联网,仅供个人学习参考,请勿用于商业用途,版权归软件开发者所有,下载后请务必于24小时内删除,请支持正版!因下载本站任何资源造成的损失,全部责任由使用者本人承担!如果你是版权方,认为本文内容对您的权益有所侵犯,请联系本站管理员,并参照侵删联系的说明提交相应的证明材料,本站将进行严格地资质审查和背景调查后,情况属实的将在三天内对本文删除或修正。本站对互联网版权绝对支持!

● 本站一贯非常高度重视知识产权保护并遵守各项知识产权法律、法规和具有约束力的规范性文件。重视正版,打击盗版。根据法律、法规和规范性文件要求,本站旨在保护权利人的合法权益的措施和步骤,当权利人发现在本站生成的链接所指向的第三方网页的内容侵犯其合法权益时,权利人应事先向本站发出"权利通知",本站将根据当地法律法规和政府规范性文件采取措施移除相关内容或链接。 

● 访问本站的用户必须明白,本站对提供下载的第三方软件不拥有任何权利,其版权归该资源的合法拥有者所有。

● 本站保证站内提供的所有可下载资源(软件等)都是按“原样”提供,本站未做过任何改动;但本网站不保证本站提供的下载资源的准确性、安全性和完整性;同时本站也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。不论何种情形我们都不对任何由于使用或无法使用本站提供的信息所造成的直接的、间接的、附带的、特殊的或余波所及的损失、灵失、债务或中断负任何责任﹝不论是可预见或是不可预见的,即使我们巳被告知这种可能性﹞。

评论区: