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的服务端分页配置.特与同学们一块分享下从中遇到的问题和解决 ...

随机推荐

CodeForces 586D
题意略. 将人的移动分为3步,第一步向右,第二步是行之间的变换,第三步是向右走2步,三步加在一起算作是一次移动,计入判重数组. 在第一步时有一个特殊情况:已经越过最右边的边界线,这时graph[x][ ...
【Unity3D技术文档翻译】第1.6篇使用 AssetBundle Manager
上一章:[Unity3D技术文档翻译]第1.5篇使用 AssetBundles 本章原文所在章节:[Unity Manual]→[Working in Unity]→[Advanced Develo ...
Java经典编程题50道之二十九
求一个3*3矩阵对角线元素之和. public class Example29 { public static void main(String[] args) { int[][] ...
Linux系统软件安装的几种方式
Linux系统,一个文件能不能执行看的是有没有可执行权限x,不过真正的可执行文件是二进制文件(binary file),举例来说Linux上的c语言源码编写完后,通过gcc程序编译后就可以创建一个可执 ...
hihoCoder1319 岛屿周长 (bfs)
思路:从给定坐标开始bfs,将所有联通点标记,然后把每个联通点的四个方向都判断一下,如果这个方向相邻的是一个非联通点说明需要把这条边实在最外围,即周长的一部分. AC代码 #include <s ...
HDU - 2147 kiki's game 巴什博弈
思路:以终点(n, m)作为P态,倒推各个坐标的状态,最终得到结论:行数或列数是偶数就能赢,否则输. AC代码 #include <cstdio> #include < ...
java I/O框架 (一)总览
一.前言 java io框架非常庞大,各种功能的类让人目不暇接,为了系统学习io框架,搜集了各种资料,整理出这篇文章,尽可能详细的讲述java io框架,其中会牵扯到许多信息,不仅包括框架内各种类的方 ...
关于服务器的CPU的几个概念学习总结
物理CPU 物理CPU: 物理CPU是指插在主板上面的CPU芯片.即指在主板上肉眼能看到的CPU的个数.一般而言,个人台式机或笔记本上只会有一个物理CPU芯片.而服务器主板上往往有多个物理CPU. L ...
第6章 MSI和MSI-X中断机制
在PCI总线中,所有需要提交中断请求的设备,必须能够通过INTx引脚提交中断请求,而MSI机制是一个可选机制.而在PCIe总线中,PCIe设备必须支持MSI或者MSI-X中断请求机制,而可以不支持IN ...
linux驱动---用I/O命令访问PCI总线设备配置空间
PCI总线推出以来,以其独有的特性受到众多厂商的青睐,已经成为计算机扩展总线的主流.目前,国内的许多技术人员已经具备开发PCI总线接口设备的能力.但是PCI总线的编程技术,也就是对PCI总线设备的操 ...

AngularJS中实现服务端分页

AngularJS中实现服务端分页的更多相关文章

随机推荐

热门专题