Angularjs的真分页,服务端分页,后台分页的解决方案
背景:项目的框架使用的是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,
2.在需要分页的html页面中,引用<script src="~/js/tm-pagination/tm.pagination.js"></script>,这里注意引用的先后顺序,是先引用angular.min.js,再引用tm.pagination.js,最后引用controller的js
3.在你html页面中,需要分页的table下面添加<tm-pagination conf="paginationConf"></tm-pagination>
4.注入tm.pagination.js,var app = angular.module('App', ['tm.pagination']); // 创建应用域,并且注入tm.pagination
5.编写访问数据的两个服务。一个是获取总页数,一个是条件,页码,每页的显示条数,获取数据的
app.factory('ListFactory', function ($http, $rootScope) {
return {
getList: function (condition) {
return $http.get(baseAddress + "trust/GetResult?" + condition);
},
getListCount: function (condition) {
return $http.get(baseAddress + "trust/GetResultCount?" + condition);
}
};
6.在Angularjs的controller中初始化,分页控件,并且编写分页方法。
// 在controller初始化的时候,注册ListFactory服务
app.controller('ListController', function ($window, $scope, $http, $location, $timeout, ListFactory) {
// 条件url
$scope.urlCondition = ""; // 查询数据结果集的总数量
$scope.ListCount = 0; // json数据
$scope.List = ""; // 配置分页的基本参数,分页控件的初始化
$scope.paginationConf = {
currentPage: 1, // 当前页数
totalItems: 0, // 一共多少条数据,和itemsPerPage决定一共会有几页
itemsPerPage: 10, // 每页几条数据,和totalItems决定一共会有几页
pagesLength: 15
}; $scope.search = function () { // 条件url
$scope.urlCondition = ""; // 获取每个输入框的值var Name = $("#Name").val();
if (Name != '' && Name != null) {
$scope.urlCondition += "EngName=" + Name + "&";
}// 初始化json数据,每次点击查询按钮的时候,要清空一次数据集,否则页面会一直保留之前的一次查询数据
$scope.List = "";
$scope.paginationConf.totalItems = 0;
$scope.paginationConf.onChange = function () {
console.log($scope.paginationConf.currentPage);
} // 获取总条数
ListFactory.getListCount($scope.urlCondition).then(function successCallback(response) {
// 当获取总页数成功时候,进行操作 // 获取总页数
$scope.ListCount = response.data;
// 设置分页属性
$scope.paginationConf.currentPage = 1;
// $scope.paginationConf.totalItems = $scope.ListCount; // 这里注释掉设置totalItems的属性,放在第一次查询时候,再设置,原因是当设置了totalItems,分页控件就会出现,而这个时候,数据还没有出现,为了保持数据和分页控件一起出现,需要在后面进行设置
$scope.paginationConf.itemsPerPage = 10;
$scope.paginationConf.pagesLength = 15;
// 设置每一次分页时候的查询动作
$scope.paginationConf.onChange = function () {
// 初始化json数据
$scope.List = "";
// 每一次分页获取数据
ListFactory.getList(
$scope.urlCondition
+ "CurrentPage=" + $scope.paginationConf.currentPage + "&"
+ "PageSize=" + $scope.paginationConf.itemsPerPage + "&").then(function successCallback(response) {
$scope.List = response.data;
}).catch(function (response) {
$scope.error = "An Error has occured while Loading ! " + response.ExceptionMessage;
});
} // 由于插件有一个bug,就是在绑定onChange方法时候,无法执行第一次查询,所以,这里需要手动进行,第一次初始化数据
ListFactory.getList($scope.urlCondition
+ "CurrentPage=" + $scope.paginationConf.currentPage + "&"
+ "PageSize=" + $scope.paginationConf.itemsPerPage + "&").then(function successCallback(response) {
$scope.List = response.data;
// 当设置总行数的时候,分页栏就会出现,为了让分页栏和数据一起出现,所以放在这里设置
$scope.paginationConf.totalItems = $scope.ListCount;
}).catch(function (response) {
$scope.error = "An Error has occured while Loading ! " + response.ExceptionMessage;
}); }).catch(function (response) {
$scope.error = "An Error has occured while Loading ! " + response.ExceptionMessage;
});
};
});
Angularjs的真分页,服务端分页,后台分页的解决方案的更多相关文章
- AngularJS中实现服务端分页
这个教程将介绍在AngularJS应用中的服务端分页处理.在任何涉及到列表或表格数据的应用中都可能会用到分页. 概念 当我们处理异步分页时,每次只从服务器上获取一页数据.也就是说当用户点击第二页,就只 ...
- asp.net mvc bootstrap datatable 服务端分页
datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 先上图[ jqueryui风格] 前端代码: @{ Layout = null;} <!DO ...
- asp.net mvc bootstrap datatable 服务端分页 更新槽糕的代码【1】
datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 datatable 1.10.7 百度云下载 密码:0ea1 先上图[ jqueryui风格] ...
- BootStrap-table 客户端分页和服务端分页的区别
当服务器没有对数据进行分页时,前端页面设计又要求进行分页,要分开来设置. 服务端分页: responseHandler: function(data){ return data.response; } ...
- BootStrap Table和Mybatis Plus实现服务端分页
一.后台java代码(Mybatis Plus分页) (1)Mybatis Plus分页的配置,在mybatis的xml文件中增加如下配置(Mybatis Plus官方文档:http://baomid ...
- datatable.js 服务端分页+fixColumns列固定
前言 记得还是15年的时候,工作需要,独自写后台管理系统..记得那时候,最让我头疼的不是后台逻辑,而是数据的列表展示. 列很多的时候,页面显示问题;分页样式问题;表格样式问题;数据加载...很多细节的 ...
- 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
前言 基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页.模糊查询(非DataTables Search),页面异步刷新. 说明:sp:message标签是使用了S ...
- BootStrap table服务端分页
涉及到的内容: 1.bootstrap-table插件: 2.mybatisplus分页查询: 3.spring封装对象匹配bootstrap-table插件格式: 4.sql查询隐藏手机号中间四位. ...
- bootstrap-table+Django: 服务端分页
分页方式: bootstrap-table提供两种分页方式,client和server,即客户端和服务端分页: 特点: client端分页:后台返回所有数据,前台翻页时不再请求后台. server端分 ...
随机推荐
- Docker入门之常用命令
写在前面 细数当前最流行的技术莫过于容器化和人工智能了,而容器化技术能有今天的热度,Docker可谓功不可没. 让我们一起来回顾一下Docker 是什么? 是一种虚拟化技术 能够将应用程序自动部署到容 ...
- 解析js中作用域、闭包——从一道经典的面试题开始
如何理解js中的作用域,闭包,私有变量,this对象概念呢? 就从一道经典的面试题开始吧! 题目:创建10个<a>标签,点击时候弹出相应的序号 先思考一下,再打开看看 //先思考一下你会怎 ...
- MonogoDB 练习一
1.解析文件,仅处理 FIELDS 字典中作为键的字段,并返回清理后的值字典列表 需求: 1.根据 FIELDS 字典中的映射更改字典的键 2.删掉"rdf-schema#label&quo ...
- html集锦
注意:此内容为复习所总结,非专业,不全,理解记录理解会有偏差. 一.HTML解释: 指的是超文本标记语言 (Hyper Text Markup Language),不是一种编程语言,而是一种标记语言 ...
- JVM类加载机制---类加载的过程
一.类加载的时机 类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个生命周期包括:加载.验证.准备.解析.初始化.使用.卸载 7个阶段,其中验证.准备.解析 3个部分统称为 连接. 二.具体步骤 ...
- ------- 软件调试——还原 QQ 过滤驱动对关键内核设施所做的修改 -------
-------------------------------------------------------------------------------- 在前一篇博文中,我们已经处理完最棘手的 ...
- Swing小技巧总结
1. 使JDialog位于屏幕的中央 public void setToScreenCenter(JDialog jd) { Dimension screenSize = Tool ...
- 济南清北学堂游记 Day 4.
不知不觉,行程已经过半了啊. 基本上已经熟悉了这里的环境,这其实也意味着我应该很快就要走了. 明天和后天还有最后四场模拟赛,虽然以我的实力拿不到奖,但我也会尽力做好我自己. 我大概反思了一下这几天,其 ...
- Python之MYsql、数据库
一.数据库的操作及安装 1.安装 MySQL Community Server 5.7.16 ---- 版本 2.初始化 mysqld --inisialize-insecure 3.启 ...
- 面向对象编程总结--Python
万物皆为对象.自然环境赋予人类无尽的遐想,而面向对象编程之思想就是来自于大自然.自然界,类和对象比比皆是,比如:鸟类和麻雀,鱼和鲤鱼......其中鸟类就是各种鸟的总称,而麻雀只不过是其中之一(对象) ...