AngularJS中实现服务端分页
这个教程将介绍在AngularJS应用中的服务端分页处理。在任何涉及到列表或表格数据的应用中都可能会用到分页。
概念
当我们处理异步分页时，每次只从服务器上获取一页数据。也就是说当用户点击第二页，就只读取第二页的数据。
下载地址：
https://github.com/rahil471/Server-Side-Pagination-In-AngularJS
概述
在客户端我们将使用到 dir-paginate 组件。调用后台API需要传递两个参数 page number 和 items per page。举个例子，每页显示10条记录，在你查看第二页时，那么API需要返回的记录是从第11条记录开始的。除了返回数据项，API还需要返回总记录数。总记录数对于分页至关重要。
分页API解释
返回分页数据的API需要两个参数
http://yourdomain/apiname/{itemsPerPage}/{pagenumber}
有这两个参数 itemsPerPage 和 pagenumber 你就可以对向数据库发出恰当的请求了。例如，如果{itemsPerPage} 是 10 and {pagenumber} 是 3，API就会是下面的样子。
http://yourdomain/apiname/10/3
相应的MySQL查询语句就是这样的
SELECT * FROM 'table_name' LIMIT ({pagenumber}-)*{itemsPerPage},{itemsPerPage}
实际上如下：
SELECT * FROM 'table_name' LIMIT ,
上面的语句会返回 第21条到第30条的记录（MySql的索引号是从0开始的）。
实现
首先我们需要先获得创建HTML文件需要的组件，要实现分页需要先下载 dirPagination.js 或是这个 dirPagination.js。
INDEX.HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Server Pagination in Angular js</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<script src="lib/angular/angular.js"></script>
<script src="lib/dirPagination.js"></script>
<script src="app/app.js"></script>
</body>
</html>
我们需要引用到 angular.js 和 dirPagination.js，app.js是我们用来编写JS代码的文件。还需要引用一些CSS来实现扁平化UI。
现在让我们创建下Angular app
APP/APP.JS
var app = angular.module('angularTable', ['angularUtils.directives.dirPagination']);
app.controller('listdata',function($http){
var vm = this;
vm.users = []; //declare an empty array
vm.pageno = ; // initialize page no to 1
vm.total_count = ;
vm.itemsPerPage = ; //this could be a dynamic value from a drop down
vm.getData = function(pageno){ // This would fetch the data on page change.
//In practice this should be in a factory.
vm.users = [];
$http.get("http://yourdomain/apiname/{itemsPerPage}/{pagenumber}").success(function(response){
//ajax request to fetch data into vm.data
vm.users = response.data; // data to be displayed on current page.
vm.total_count = response.total_count; // total data count.
});
};
vm.getData(vm.pageno); // Call the function to fetch initial data on page load.
});
上面的示例我们声明了angularJS的应用（app）和控制器(controller),并且添加了angularUtils.directives.dirPagination作为我们应用的依赖项。控制器中采用.vm代表 view-model 作为 this 的引用。首先我们对一些重要的参数进行了初始化。
1、vm.users – 用来存储页面上数据的集合。
2、vm.pageno – 加载时设置当前页为1。
3、vm.total_count – 存储总记录数。 结果又由API返回
4、vm.itemsPerPage – 每页显示记录数 (可动态设置)
5、vm.getData() – 每次用户点击新页时调用的方法. 初始加载第一页。
现在我们的控制器已经准备好了。下面我使用 dir-paginate 指令重复显示数据（替代了angularjs的ng-repeat指令），将total_count赋给total-items指令。
dir-paginate将使用这个数值来生成分页链接。
<tr dir-paginate=”user in data.users|itemsPerPage:data.itemsPerPage” total-items=”data.total_count”>
下一步我们将使用dir-pagination-controls指令添加分页链接。
PAGINATION CONTROLS
<dir-pagination-controls
max-size=""
direction-links="true"
boundary-links="true"
on-page-change="data.getData(newPageNumber)">
</dir-pagination-controls>
on-page-change 指令这里是关键，在每次页改变的时候都会调用一个函数，用这个指令来调用vm.getdata(pageno)方法。这个方法会使用新的页码向服务器请求下一页的数据。
不要忘记声明你自己的 ng-app 和 ng-controller。看下完成标记。
INDEX.HTML
<!doctype html>
<html lang="en" ng-app="angularTable">
<head>
<meta charset="utf-8">
<title>Server Side Pagination in Angular js</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div role="main" class="container theme-showcase">
<div class="" style="margin-top:90px;">
<div class="col-lg-8">
<div class="page-header">
<h2 id="tables">Server Side pagination in Angular js</h2>
</div>
<div class="bs-component" ng-controller="listdata as data">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Full Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-show="data.users.length <= 0"><td colspan="" style="text-align:center;">Loading new data!!</td></tr>
<tr dir-paginate="user in data.users|itemsPerPage:data.itemsPerPage" total-items="data.total_count">
<td>{{user.index}}</td>
<td>{{user.name}}</td>
<td>{{user.surname}}</td>
<td>{{user.fullname}}</td>
<td>{{user.email}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls
max-size=""
direction-links="true"
boundary-links="true"
on-page-change="data.getData(newPageNumber)" >
</dir-pagination-controls>
</div>
</div>
</div>
</div>
<script src="lib/angular/angular.js"></script>
<script src="lib/dirPagination.js"></script>
<script src="app/app.js"></script>
</body>
</html>
ng-controller="listdata as data" 采用了ControllerAs语法。
如果想了解更多的dirPaginate ，你可以点击这里。
结论
文章中我们已经看到如何在angularjs项目中简单地实现分页。分页通常用于大数据集。减少了加载时间，也使DOM轻便多了。
AngularJS中实现服务端分页的更多相关文章
- Angularjs的真分页，服务端分页，后台分页的解决方案
背景:项目的框架使用的是Angularjs,在做数据展示的时候,使用的是ng-table.用过ng-table的人都知道,他是自带分页的,默认分页方式是假分页.也就是一口气把所有的数据从数据库里取出来 ...
- 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和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+Django: 服务端分页
分页方式: bootstrap-table提供两种分页方式,client和server,即客户端和服务端分页: 特点: client端分页:后台返回所有数据,前台翻页时不再请求后台. server端分 ...
- ThinkPHP整合datatables实现服务端分页
最近做东西有一个需求,因为数据量很大,在这里我决定使用datatables的服务端分页,同时还需要传递查询条件到服务端.在网上搜索的大部分文章都感觉有些误差,于是自己封装了一下,主要配置/工具为: 服 ...
- jquery.dataTables的探索之路-服务端分页配置
最近闲来无事想研究下数据表格,因为之前接触过layui和bootstrap的数据表格,本着能学多少学多少的学习态度,学习下dataTables的服务端分页配置.特与同学们一块分享下从中遇到的问题和解决 ...
随机推荐
- Halcon一日一练：图像拼接技术2:步骤与例程
上一篇主要介绍了图像拼接的一些原理和方法,这一篇将主要介绍步骤和例程: 接上一篇: 基于特征的接拼方法,分为四个步骤 1.特征检测:从图像中检测出显著且独特的图像特征,诸如:闭合区域,直线段,边缘,轮 ...
- 定时执行 Job - 每天5分钟玩转 Docker 容器技术（135）
Linux 中有 cron 程序定时执行任务,Kubernetes 的 CronJob 提供了类似的功能,可以定时执行 Job.CronJob 配置文件示例如下: ① batch/v2alpha1 是 ...
- try{}里有一个 return 语句，那么紧跟在这个 try 后的 finally {}里的 code 会 不会被执行，什么时候被执行，在 return 前还是后?
这是一道面试题,首先finally{}里面的code肯定是会执行的,至于在return前还是后, 看答案说的是在return后执行,我觉得不对,百度了一下,有说return前的,有说return后的, ...
- Windows系统上FFMpeg-PHP的使用
这几天做项目,其中一个需求是用户上传视频文件到服务器,然后服务器自动截取该视频的一帧作为该视频对应的缩略图,服务器端语言采用php编写,找了半天资料,发现ffmpeg-php可以满足该需求,所以下面简 ...
- DxPackNet 3.音频捕捉（录音）
用DxpackNet捕捉音频其实很简单 1.初始化控件 IDxMicrophCapture microphone; private void Form1_Load(object sender, Eve ...
- axios + mock.js模拟数据实现前后端分离开发的实例代码
首先就是必须安装axios和mock.js npm install axios npm install mockjs 1. 然后在文档src中新建一个mock.js文件,如图 2. 在main.js中 ...
- linux链接
( 1 )软连接可以跨文件系统,硬连接不可以 ( 2 )硬连接不管有多少个,都指向的是同一个 I 节点,会把结点连接数增加,只要结点的连接数不是 0 ,文件就一直存在不管你删除的是源文件还是连接的文件 ...
- 故障定位之查找附近点GeoHash研讨
随着移动终端的普及,很多应用都基于LBS功能,附近的某某(餐馆.银行.妹纸等等). 基础数据中,一般保存了目标位置的经纬度:利用用户提供的经纬度,进行对比,从而获得是否在附近. 目标:查找附近的XXX ...
- Hive导入HDFS/本地数据
#创建表人信息表 person(String name,int age) hive> create table person(name STRING,age INT)ROW FORMAT DE ...
- linux及hadoop修改权限
linux下修改文件权限: 在shell环境里输入:ls -l 或者 ls -lh drwxr-xr-x 2 nsf users 1024 12-10 17:37 下载文件备份对应:文件属性 连接数 ...