一、编写angularJS实现的分页js(网上搜)和样式表（pagination）,并在页面引入

二、编写变量和方法

  1. //分页控件控制
  2.             $scope.paginationConf={
  3.                     currentPage:1,  //当前页
  4.                     totalItems:10,  //总记录数
  5.                     itemsPerPage:10,  //每页记录数
  6.                     perPageOptions:[10,20,30,40,50], //分页选项
  7.                     onChange:function(){ //当页码变更后自动触发的方法
  8.                         $scope.reloadList();
  9.                     }
  10.             };
  11.             //刷新列表
  12.             $scope.reloadList=function(){
  13.                 $scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
  14.             };
  15.             $scope.findPage=function(page,size){
  16.                 $http.get('../brand/getBrandByPage.do?page='+page+'&size='+size).success(//后台基于pageHelper实现的分页数据获取
  17.                         function(res){
  18.                             $scope.list = res.rows;//显示当前页数据
  19.                             $scope.paginationConf.totalItems=res.total;//更新总记录数
  20.                         }
  21.                     )
  22.             }

三、引入分页变量

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

页面

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>品牌管理</title>
  7.     <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  8.     <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
  9.     <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
  10.     <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
  11.     <link rel="stylesheet" href="../css/style.css">
  12.     <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
  13.     <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
  14.  
  15.     <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
  16.     <script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
  17.  
  18.     <link rel="stylesheet" href="../plugins/angularjs/pagination.css"/>
  19.     <script type="text/javascript">
  20.         var app = angular.module('eshop',['pagination']);
  21.         app.controller('brandController',function($scope,$http){
  22.             //获取查询数据
  23.             $scope.findAll= function(){
  24.                 $http.get('../brand/getAllBrand.do').success(
  25.                     function(res){
  26.                         $scope.list = res;
  27.                     }
  28.                 )
  29.             };
  30.  
  31.             //分页控件控制
  32.             $scope.paginationConf={
  33.                     currentPage:1,  //当前页
  34.                     totalItems:10,  //总记录数
  35.                     itemsPerPage:10,  //每页记录数
  36.                     perPageOptions:[10,20,30,40,50], //分页选项
  37.                     onChange:function(){ //当页码变更后自动触发的方法
  38.                         $scope.reloadList();
  39.                     }
  40.             };
  41.             //刷新列表
  42.             $scope.reloadList=function(){
  43.                 $scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
  44.             };
  45.             $scope.findPage=function(page,size){
  46.                 $http.get('../brand/getBrandByPage.do?page='+page+'&size='+size).success(
  47.                         function(res){
  48.                             $scope.list = res.rows;//显示当前页数据
  49.                             $scope.paginationConf.totalItems=res.total;//更新总记录数
  50.                         }
  51.                     )
  52.             }
  53.         });
  54.     </script>
  55. </head>
  56. <body class="hold-transition skin-red sidebar-mini" ng-app="eshop" ng-controller="brandController" >
  57.   <!-- .box-body -->
  58.                     <div class="box-header with-border">
  59.                         <h3 class="box-title">品牌管理</h3>
  60.                     </div>
  61.  
  62.                     <div class="box-body">
  63.  
  64.                         <!-- 数据表格 -->
  65.                         <div class="table-box">
  66.  
  67.                             <!--工具栏-->
  68.                             <div class="pull-left">
  69.                                 <div class="form-group form-inline">
  70.                                     <div class="btn-group">
  71.                                         <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
  72.                                         <button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
  73.                                         <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
  74.                                     </div>
  75.                                 </div>
  76.                             </div>
  77.                             <div class="box-tools pull-right">
  78.                                 <div class="has-feedback">
  79.  
  80.                                 </div>
  81.                             </div>
  82.                             <!--工具栏/-->
  83.  
  84.                               <!--数据列表-->
  85.                               <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
  86.                                   <thead>
  87.                                       <tr>
  88.                                           <th class="" style="padding-right:0px">
  89.                                               <input id="selall" type="checkbox" class="icheckbox_square-blue">
  90.                                           </th>
  91.                                           <th class="sorting_asc">品牌ID</th>
  92.                                           <th class="sorting">品牌名称</th>
  93.                                           <th class="sorting">品牌首字母</th>
  94.                                           <th class="text-center">操作</th>
  95.                                       </tr>
  96.                                   </thead>
  97.                                   <tbody>
  98.                                       <tr ng-repeat="entity in list">
  99.                                           <td><input  type="checkbox" ></td>
  100.                                           <td>{{entity.id}}</td>
  101.                                           <td>{{entity.name}}</td>
  102.                                           <td>{{entity.firstChar}}</td>
  103.                                           <td class="text-center">
  104.                                                <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal"  >修改</button>
  105.                                           </td>
  106.                                       </tr>
  107.                                   </tbody>
  108.                               </table>
  109.                               <!--数据列表/-->                        
  110.  
  111.                         </div>
  112.                         <!-- 数据表格 /-->
  113.                         <tm-pagination conf="paginationConf"></tm-pagination>
  114.  
  115.                      </div>
  116.                     <!-- /.box-body -->
  117.  
  118. <!-- 编辑窗口 -->
  119. <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  120.   <div class="modal-dialog" >
  121.     <div class="modal-content">
  122.         <div class="modal-header">
  123.             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  124.             <h3 id="myModalLabel">品牌编辑</h3>
  125.         </div>
  126.         <div class="modal-body">
  127.             <table class="table table-bordered table-striped"  width="800px">
  128.                   <tr>
  129.                       <td>品牌名称</td>
  130.                       <td><input  class="form-control" placeholder="品牌名称" >  </td>
  131.                   </tr>
  132.                   <tr>
  133.                       <td>首字母</td>
  134.                       <td><input  class="form-control" placeholder="首字母">  </td>
  135.                   </tr>
  136.              </table>
  137.         </div>
  138.         <div class="modal-footer">
  139.             <button class="btn btn-success" data-dismiss="modal" aria-hidden="true">保存</button>
  140.             <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
  141.         </div>
  142.       </div>
  143.     </div>
  144. </div>
  145.  
  146. </body>
  147. </html>

Angular.js实现分页的更多相关文章

  1. angular JS 做分页

    在网上找了一天,连一个像样点的分页DEMO都没找到,晕死了.大部分都是相互抄,有各种各样的问题,要不是代码有BUG,要不就是解释不明,GITHUB上下载下来的总是乱糟糟的.心累.

  2. Angular.js+Bootstrap实现表格分页

    最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功 ...

  3. angular.js分页代码的实例

    对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在 ...

  4. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

  5. angular.js的一点理解

    对angular.js的一点理解 2015-01-14 13:18 by MrGeorgeZhao, 317 阅读, 4 评论, 收藏, 编辑 最近一直在学习angular.js.不得不说和jquer ...

  6. angular.js 渲染

    angular.js 小常识   具体看代码,转载请备注来源. html结构 <%@ page language="java" contentType="text/ ...

  7. 在angular中利用分页插件进行分页

    必需:angular分页js和css  当然还有angular.js   还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...

  8. 对angular.js的一点理解

    最近一直在学习angular.js.不得不说和jquery相比有很大不同,有很多的不同点,之前也用过Knockout.js 但是两者还是有一定的区别的,首先knockout.js是基于Mvvm的,是几 ...

  9. Angular.js路由 简单小案例

    代码案例: <html> <head> <meta charset="utf-8"> <title>AngularJS 路由实例&l ...

随机推荐

  1. WPF Demo20 模板

    <Window x:Class="控件模板.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/x ...

  2. Comparator 排序 ArrayList 实操练习

    package ltb6w; import java.util.Scanner;import java.util.ArrayList;import java.util.Comparator;impor ...

  3. 【java】之equals和==区别

      Java中数据类型可以分为两类 1.基本数据类型(byte,short,char,int,float,double,long,boolean) 2.复合数据类型(类,String等) Δ在基本数据 ...

  4. Android keystore相关

    一.生成keystorekeytool -genkey -alias test.keystore -keyalg RSA -validity -keystore test.keystore 二.查看 ...

  5. Java-Runoob-高级教程-实例-方法：07. Java 实例 – instanceOf 关键字用法

    ylbtech-Java-Runoob-高级教程-实例-方法:07. Java 实例 – instanceOf 关键字用法 1.返回顶部 1. Java 实例 - instanceof 关键字用法   ...

  6. java多线程——监视锁(monitor)（转）

    https://blog.csdn.net/hqq2023623/article/details/51000153 java中每个对象都有唯一的一个monitor,想拥有一个对象的monitor的话有 ...

  7. laraval一键安装包的下载地址

    http://laravelacademy.org/resources-download

  8. CentOS 7安装Oracle 11gR2以及设置自启动（1）

    一.环境准备 1.正确无误的CentOS 7系统环境 虚拟机要求: 内存至少2G 处理器至少2个 根分区要大于20G(安装oracle很占空间,空闲空间要足够) 2.正确的JDK环境 CentOS 7 ...

  9. 云端搭建内网局域网+NAT冗余上网：vps-centos6.10 +pptp client +2个ros 实现默认走pptp上网，万一pptp断了，走另外一个ros路由+centos7补充了下

    介绍下环境: 1.ROS1也是PPTP SERVER,IP为172.16.22.3/24,pptp pool为172.16.23.0/24,pptp的默认帐号是111,密码是123 2.ROS2的IP ...

  10. [UE4]修改相机裁剪距离

    在UE4中,相机距离一个物体太近,物体就会被裁剪,这个距离是一个全局设定,无法单个相机设置. 项目设置: