背景:项目的框架使用的是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的真分页,服务端分页,后台分页的解决方案的更多相关文章

  1. AngularJS中实现服务端分页

    这个教程将介绍在AngularJS应用中的服务端分页处理.在任何涉及到列表或表格数据的应用中都可能会用到分页. 概念 当我们处理异步分页时,每次只从服务器上获取一页数据.也就是说当用户点击第二页,就只 ...

  2. asp.net mvc bootstrap datatable 服务端分页

    datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 先上图[ jqueryui风格] 前端代码: @{ Layout = null;} <!DO ...

  3. asp.net mvc bootstrap datatable 服务端分页 更新槽糕的代码【1】

    datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 datatable 1.10.7 百度云下载  密码:0ea1 先上图[ jqueryui风格] ...

  4. BootStrap-table 客户端分页和服务端分页的区别

    当服务器没有对数据进行分页时,前端页面设计又要求进行分页,要分开来设置. 服务端分页: responseHandler: function(data){ return data.response; } ...

  5. BootStrap Table和Mybatis Plus实现服务端分页

    一.后台java代码(Mybatis Plus分页) (1)Mybatis Plus分页的配置,在mybatis的xml文件中增加如下配置(Mybatis Plus官方文档:http://baomid ...

  6. datatable.js 服务端分页+fixColumns列固定

    前言 记得还是15年的时候,工作需要,独自写后台管理系统..记得那时候,最让我头疼的不是后台逻辑,而是数据的列表展示. 列很多的时候,页面显示问题;分页样式问题;表格样式问题;数据加载...很多细节的 ...

  7. 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

    前言 基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页.模糊查询(非DataTables Search),页面异步刷新. 说明:sp:message标签是使用了S ...

  8. BootStrap table服务端分页

    涉及到的内容: 1.bootstrap-table插件: 2.mybatisplus分页查询: 3.spring封装对象匹配bootstrap-table插件格式: 4.sql查询隐藏手机号中间四位. ...

  9. bootstrap-table+Django: 服务端分页

    分页方式: bootstrap-table提供两种分页方式,client和server,即客户端和服务端分页: 特点: client端分页:后台返回所有数据,前台翻页时不再请求后台. server端分 ...

随机推荐

  1. JavaScript中的类继承

    JavaScript是一个无class的面向对象语言,它使用原型继承而非类继承.这会让那些使用传统面向对象语言如C++和Java的程序员们感到困惑.正如我们所看到的,JavaScript的原型继承比类 ...

  2. iOS-Mac远程连接控制Window【苹果电脑远程连接控制Windows电脑】

    用Mac电脑时想远程控制Windows电脑,摸索了半天搞定了 1.下载Mac远程控制安装包:http://pan.baidu.com/s/1o7ZsDQy  提取密码:r2ja 2.安装好之后打开,就 ...

  3. 夏令营讲课内容整理 Day 5.

    DP专场.. 动态规划是运筹学的一个分支, 求解决策过程最优化的数学方法. 我们一般把动态规划简称为DP(Dynamic Programming)   1.动态规划的背包问题 有一个容量为m的背包,有 ...

  4. 浅析Numpy.genfromtxt及File I/O讲解

    Python 并没有提供数组功能,虽然列表 (list) 可以完成基本的数组功能,但它并不是真正的数组,而且在数据量较大时,使用列表的速度就会慢的让人难受.为此,Numpy 提供了真正的数组功能,以及 ...

  5. ubuntu 开发板ping通虚拟机挂载nfs服务器

    先.nfs服务配置1.设置开发板ip ,同一网段2.开发板上操作:ifconfig eth0 192.168.1.203.测试是否能够ping通:ping 192.168.1.194.测试开发板ip是 ...

  6. ionic2+Angular 依赖注入之Subject ——使用Subject来实现组件之间的通信

    在Angular+ionic2 开发过程中,我们不难发现,页面之间跳转之后返回时是不会刷新数据的. 场景一:当前页面需要登录之后才能获取数据--去登录,登录成功之后返回--页面需要手动刷新才能获取到数 ...

  7. TensorFlow 实战之实现卷积神经网络

    本文根据最近学习TensorFlow书籍网络文章的情况,特将一些学习心得做了总结,详情如下.如有不当之处,请各位大拿多多指点,在此谢过. 一.相关性概念 1.卷积神经网络(ConvolutionNeu ...

  8. Python比较运算符

    判断两个对象之间的关系,和条件选择和循环结合使用的 以下假设变量a为10,变量b为20: 示例1:输入三个互不相等的整数,按照从小到大输出 num01,num02,num03 = eval(input ...

  9. intellij idea maven springmvc 环境搭建

    1.   新建maven 工程 intellij idea 默认已经集成了maven, 直接点击下一步 2.   配置文件修改 pom.xml 文件 <?xml version="1. ...

  10. Java导出freemarker实现下载word文档格式功能

    首先呢,先说一下制作freemarker模板步骤, 1. 在WPS上写出所要的下载的word格式当做模板 2. 把模板内不固定的内容(例:从数据库读取的信息)写成123或者好代替的文字标注 3. 把固 ...