首先在项目中引入 分页插件的 js 和 css:

在html页面引入 相关js 和 css；

在控制器中引入分页插件中定义的 module【可以打开pagination.js查看，可以看到

其实，在插件里面，它定义了一个单独的 module，所以我们在控制器中使用分页插件时，要先注入 这个 module

】

然后我们就可以在想要出现分页控件的位置，加上一个标签：

加上这个标签，就会在这里出现分页，注意，它有个属性 conf 这里定义的名字是 paginationConf，这个属性是个对象，它可以定义分页插件在页面上要显示的东西的详细配置（比如：每页显示多少条记录啥的）。

我们可以把这个conf的值定义在控制器中，然后定义请求方法，并调用

   <!-- 分页插件使用 -->

    <script src="../plugins/angularjs/pagination.js"></script>

    <link rel="stylesheet" href="../plugins/angularjs/pagination.css">

    <script type="text/javascript">

        var app = angular.module("pingyougou",["pagination"]);

        app.controller("brandController",function($scope,$http){

            //分页查询品牌列表

            //【其实在这个分页插件内部就有当页面一加载就执行一遍paginationConf中的onChange方法，
//所以我们在这块代码中不用再显示的写一遍$scope.reloadList()，只需配置好分页插件配置文件即可】

            //分页控件配置

            /*

             currentPage: 当前页

             totalItems: 总记录数

             itemsPerPage: 每页记录数

             perPageOptions: [10, 20, 30, 40, 50], 分页选项【就是每页显示几条记录的备选下拉】

             onChange: 当页面变更后自动触发的方法

            */

            $scope.paginationConf = {

                     currentPage: 1,

                     totalItems: 10,

                     itemsPerPage: 10,

                     perPageOptions: [10, 20, 30, 40, 50],

                     onChange: function(){

                        $scope.reloadList();//重新加载

                     }

            }; 

            //刷新列表【因为要频繁使用，避免写很长代码，这里封装成一个方法】

            $scope.reloadList=function(){

                //调用分页请求方法

                $scope.findPage(

                        $scope.paginationConf.currentPage,

                        $scope.paginationConf.itemsPerPage

                );

            }

            //分页请求方法

            $scope.findPage=function(page,size){

                $http.get("../brand/findPage.do?page="+page+"&size="+size).success(

                    function(response){

                        $scope.list = response.rows; //显示当前页数据

                        $scope.paginationConf.totalItems = response.total;//更新总记录数

                    }

                );

            }

        });

    </script>

前台效果：

=====

附件：

完整前台代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>品牌管理</title>

    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">

    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">

    <link rel="stylesheet" href="../css/style.css">

    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>

    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

    <!-- 引入angularJS -->

    <script src="../plugins/angularjs/angular.min.js"></script>

    <!-- 分页插件使用 -->

    <script src="../plugins/angularjs/pagination.js"></script>

    <link rel="stylesheet" href="../plugins/angularjs/pagination.css">

    <script type="text/javascript">

        var app = angular.module("pingyougou",["pagination"]);

        app.controller("brandController",function($scope,$http){

            //分页查询品牌列表

            //【其实在分页插件内部就有当页面一加载就执行一遍请求的方法调用，所以我们在这块代码中不用再显示的写一遍$scope.reloadList()】

            //分页控件配置

            /*

             currentPage: 当前页

             totalItems: 总记录数

             itemsPerPage: 每页记录数

             perPageOptions: [10, 20, 30, 40, 50], 分页选项【就是每页显示几条记录的备选下拉】

             onChange: 当页面变更后自动触发的方法

            */

            $scope.paginationConf = {

                     currentPage: 1,

                     totalItems: 10,

                     itemsPerPage: 10,

                     perPageOptions: [10, 20, 30, 40, 50],

                     onChange: function(){

                        $scope.reloadList();//重新加载

                     }

            }; 

            //刷新列表【因为要频繁使用，避免写很长代码，这里封装成一个方法】

            $scope.reloadList=function(){

                //调用分页请求方法

                $scope.findPage(

                        $scope.paginationConf.currentPage,

                        $scope.paginationConf.itemsPerPage

                );

            }

            //分页请求方法

            $scope.findPage=function(page,size){

                $http.get("../brand/findPage.do?page="+page+"&size="+size).success(

                    function(response){

                        $scope.list = response.rows; //显示当前页数据

                        $scope.paginationConf.totalItems = response.total;//更新总记录数

                    }

                );

            }

        });

    </script>

</head>

<body class="hold-transition skin-red sidebar-mini" ng-app="pingyougou" ng-controller="brandController" >

  <!-- .box-body -->

                    <div class="box-header with-border">

                        <h3 class="box-title">品牌管理</h3>

                    </div>

                    <div class="box-body">

                        <!-- 数据表格 -->

                        <div class="table-box">

                            <!--工具栏-->

                            <div class="pull-left">

                                <div class="form-group form-inline">

                                    <div class="btn-group">

                                        <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>

                                        <button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>

                                        <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>

                                    </div>

                                </div>

                            </div>

                            <div class="box-tools pull-right">

                                <div class="has-feedback">

                                </div>

                            </div>

                            <!--工具栏/-->

                              <!--数据列表-->

                              <table id="dataList" class="table table-bordered table-striped table-hover dataTable">

                                  <thead>

                                      <tr>

                                          <th class="" style="padding-right:0px">

                                              <input id="selall" type="checkbox" class="icheckbox_square-blue">

                                          </th>

                                          <th class="sorting_asc">品牌ID</th>

                                          <th class="sorting">品牌名称</th>

                                          <th class="sorting">品牌首字母</th>

                                          <th class="text-center">操作</th>

                                      </tr>

                                  </thead>

                                  <tbody>

                                      <tr ng-repeat="entity in list">

                                          <td><input  type="checkbox" ></td>

                                          <td>{{entity.id}}</td>

                                          <td>{{entity.name}}</td>

                                          <td>{{entity.firstChar}}</td>

                                          <td class="text-center">

                                               <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal"  >修改</button>

                                          </td>

                                      </tr>

                                  </tbody>

                              </table>

                              <!-- 分页 -->

                              <tm-pagination conf="paginationConf"></tm-pagination>

                        </div>

                        <!-- 数据表格 /-->

                     </div>

                    <!-- /.box-body -->

<!-- 编辑窗口 -->

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

  <div class="modal-dialog" >

    <div class="modal-content">

        <div class="modal-header">

            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

            <h3 id="myModalLabel">品牌编辑</h3>

        </div>

        <div class="modal-body">

            <table class="table table-bordered table-striped"  width="800px">

                  <tr>

                      <td>品牌名称</td>

                      <td><input  class="form-control" placeholder="品牌名称" >  </td>

                  </tr>

                  <tr>

                      <td>首字母</td>

                      <td><input  class="form-control" placeholder="首字母">  </td>

                  </tr>

             </table>

        </div>

        <div class="modal-footer">

            <button class="btn btn-success" data-dismiss="modal" aria-hidden="true">保存</button>

            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>

        </div>

      </div>

    </div>

</div>

</body>

</html>

后台Controller代码：

package com.pinyougou.manager.controller;

import java.io.BufferedInputStream;

import java.io.BufferedOutputStream;

import java.io.File;

import java.io.FileInputStream;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.OutputStream;

import java.util.ArrayList;

import java.util.List;

import java.util.UUID;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.tools.zip.ZipEntry;

import org.apache.tools.zip.ZipOutputStream;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import com.alibaba.dubbo.config.annotation.Reference;

import com.pinyougou.pojo.TbBrand;

import com.pinyougou.sellergoods.service.BrandService;

import entity.PageResult;

@RestController

@RequestMapping("/brand")

public class BrandController {

    @Reference

    private BrandService brandService;

    @RequestMapping("/findAll")

    public List<TbBrand> findAll() {

        return brandService.findAll();

    }

    /**

     *<p>Description: 分页查询<p>

     * @date 2018年11月19日

     * @param page 当前页码

     * @param size    每页记录条数

     * @return

     */

    @RequestMapping("/findPage")

    public PageResult findPage(int page,int size) {

        return brandService.findPage(page,size);

    }

}

angularJS前端分页插件的更多相关文章

  1. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

  2. 前端分页插件pagination

    摘要: 最近在开发项目中又用到了前端分页,以前也做过,为了方便以后使用所以将他封装成第三方插件,不依赖任何库.网上已经有很多插件,问什么还要自己造轮子? 自己写的扩展性高 不依赖任何库 作为一次技术沉 ...

  3. Jquery前端分页插件pagination使用

    插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...

  4. 前端分页插件bootstrapPaginator的使用

     引入bootstrap-paginator.js <table class="table table-striped table-bordered table-hover dataT ...

  5. angular分页插件tm.pagination二次触发问题解决歪方案

    今天在学习angularjs的分页插件时遇到了一个前端的问题,谷歌浏览器开发者模式调试的时候发现每次点击分页刷新按钮会触发两次后台请求,ajax向后台发送了两次请求,这对于强迫症患者来说是一个比较恶心 ...

  6. AngularJS入门 & 分页 & CRUD示例

    一.AngularJS 简介 ​ AngularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中. ...

  7. 品优购商城项目（二）mybatis分页插件

    品优购商城项目第二天,使用mybatis分页插件实现分页.主要实现的是 SSM整合mybatis分页. 一.引用mybatis分页插件 SqlMapConfig.xml <?xml versio ...

  8. 前端分页神器，jquery grid的使用（前后端联调），让分页变得更简单。

    jquery grid 是一款非常好用的前端分页插件,下面来讲讲怎么使用. 首先需要引入jquery grid 的CSS和JS (我们使用的是bootstrap的样式) 下面我们通过一个例子来讲解,需 ...

  9. 浅谈Django的Q查询以及AngularJS的Datatables分页插件

    使用Q查询,首先要导入Q模块: from django.db.models import Q 可以组合使用&,|操作符用于多个Q的对象,产生一个新的Q对象,Q对象也可以用~操作符放在前面表示否 ...

随机推荐

  1. 使用advanced_installer将.net web程序打包为安装程序

    当项目开发完成之后,需要给客户使用时,总不能将发布后的文件全部放一起压缩后直接给客户吧,然后客户需要自行搭建环境修改配置等等,体验太差了,这时候我们就需要使用一种打包工具了,查了一些资料之后,我选择使 ...

  2. 使用InstallShield-Limited-Edition制作安装包

    1.打开此网站,进行注册,获取序列码以及下载InstallShield-Limited-Edition 2.安装完成之后,打开VisualStudio,新建项目 3.填写基本应用信息 4.配置相关信息 ...

  3. Unity编辑器 - Undo的坑

    Unity编辑器 - Undo的坑 编辑器通过脚本中改变值,Undo.RecordObject可能会无效,应该使用: Undo.RegisterCompleteObjectUndo(Object ob ...

  4. C# 中访问修饰符

    1.public 完全公开的,公共的 2. private 私有的,只能在当前类的内部访问, 不可修饰类 3.protected 受保护的,只能在当前类的内部以及其子类中访问,不能用来修饰类 4.in ...

  5. Java进阶知识点： 枚举值

    Java进阶知识点1:白捡的扩展性 - 枚举值也是对象   一.背景 枚举经常被大家用来储存一组有限个数的候选常量.比如下面定义了一组常见数据库类型: public enum DatabaseType ...

  6. tomcat 运行机制

    先不去关技术细节,对一个servlet容器,我觉得它首先要做以下事情:1:实现Servlet api规范.这是最基础的一个实现,servlet api大部分都是接口规范.如request.respon ...

  7. POJ 1696 Space Ant（凸包变形）

    Description The most exciting space discovery occurred at the end of the 20th century. In 1999, scie ...

  8. 11.22Daily Scrum（2）

    人员 任务分配完成情况 明天任务分配 王皓南 实现网页上视频浏览的功能.研究相关的代码和功能.984 数据库测试 申开亮 实现网页上视频浏览的功能.研究相关的代码和功能.985 实现视频浏览的功能 王 ...

  9. lintcode-143-排颜色 II

    143-排颜色 II 给定一个有n个对象(包括k种不同的颜色,并按照1到k进行编号)的数组,将对象进行分类使相同颜色的对象相邻,并按照1,2,...k的顺序进行排序. 注意事项 You are not ...

  10. LintCode-373.奇偶分割数组

    奇偶分割数组 分割一个整数数组,使得奇数在前偶数在后. 样例 给定 [1, 2, 3, 4],返回 [1, 3, 2, 4]. 挑战 在原数组中完成,不使用额外空间. 标签 数组 两根指针 code ...