angular js 实现分页

如果这篇文章能给你带来帮助，不胜荣幸，如果有不对的地方也请批评指正共同进步，废话不多说直接上代码。

　　首先来讲你可以使用page的分页插件，也可以不使用我没有使用，所以得展示部分sql语句。总体来说sql语句的代码就是：select * from table where 1=1 limit start,num

其中start为起始下标，num为展示多少条。具体看下面

  <select id="selectByPageBean" resultMap="BaseResultMap">
      select * from registration_of_cases where 1=1
      limit #{pageBean.start},#{pageBean.pageSize}
  </select>

　　然后需要创建一个分页类：分页累的作用就是简单地给你进行一下计算，比如说传入当前的页数可以得到查询的起始位置等等不在一一赘述，看代码

package com.social.util;

import java.util.List;

public class PageBean {
	
	private int pageSize = 5;//每页数量
	private int pageNum = 1;//默认当前是第一页
	private int total = 0;//总条数
	private int totalPage = 0;//总页数
	private int start = 0;//起始位置
	private List rows;//接受数据的集合
	private String url="";//请求的路径
	
	public int getPageSize() {
		return pageSize;
	}
	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}
	public int getPageNum() {
		return pageNum;
	}
	public void setPageNum(int pageNum) {
		this.pageNum = pageNum;
	}
	public int getTotal() {
		return total;
	}
	public void setTotal(int total) {
		this.total = total;
	}
	public int getTotalPage() {
		int pageCount = 0;
		if(total%pageSize==0) {
			pageCount=total/pageSize;
		}else {
			pageCount=total/pageSize+1;
		}
		totalPage = pageCount;
		return totalPage;
	}
	public void setTotalPage(int totalPage) {
		this.totalPage = totalPage;
	}
	public int getStart() {
		start = (pageNum-1)*pageSize;
		return start;
	}
	public void setStart(int start) {
		this.start = start;
	}
	public List getRows() {
		return rows;
	}
	public void setRows(List rows) {
		this.rows = rows;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}
	@Override
	public String toString() {
		return "PageBean [pageSize=" + pageSize + ", pageNum=" + pageNum + ", total=" + total + ", totalPage="
				+ totalPage + ", start=" + start + ", rows=" + rows + ", url=" + url + "]";
	}
	
	
	

}

　　在写这个之前，还得写一个查询所有的方法，如果你牛逼其实一个方法也可以，这篇文章就是给基础的看的。接着往下

后台的工作目前做到这里就算差不多的了现在来看一下前台界面你需要写一部分js 上代码：

首先引入相关的js和css样式例如：

	<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
　   　　<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="plugins/angularjs/pagination.css">
	<script type="text/javascript" src="plugins/angularjs/pagination.js"></script>
	<script type="text/javascript" src="plugins/angularjs/angular.min.js"></script>

　　然后接着上具体的前段代码部分解释代码中见：

<script type="text/javascript">
		var app = angular.module('lfxr', [ 'pagination' ]);//其中pagination 对应的是 pagination.js里面的值
		app.controller('FirstController', function($scope, $http) {
			//声明方法
			$scope.findAll = function() {
　　　　　　　　　　　　　　　　　　　//发送请求 得到相应和返回的结果
				$http.get('http://localhost:80/mysocial/pagefind').success(function(response) {
					$scope.list = response.row;//用list容器来接受得到的结果 其中这个response跟后台返回的数据相对应
				});
			}
			
			//初始化和点击时给部分分页的参数进行一个赋值
			$scope.paginationConf = {
				currentPage : 1,//当前页
				totalItems : 20,//总数
				itemsPerPage : 5,//每页个数
				perPageOptions : [ 5, 10, 15, 20, 50 ],//分页选项
				onChange : function() {//当更改页码时，自动触发分页查询方法
					$scope.reloadlist();
				}
			};
			//有改变的时候调用重新加载的方法
			$scope.reloadlist = function() {//方法里面有两个参数 当前页和每页多少条
				$scope.findPage($scope.paginationConf.currentPage,
						$scope.paginationConf.itemsPerPage);
			}
			//根据条件进行分页查询
			$scope.findPage = function(pageNum, pageSize) {
				$http.get(
						'http://localhost:80/mysocial/pagefind?pageNum=' + pageNum + '&pageSize='
								+ pageSize + '').success(function(response) {
					$scope.list = response.rows;//显示当前页数据
					$scope.paginationConf.totalItems = response.total;//更新总记录数
				});
			}
		});
	</script>

具体的html界面上的代码：

<tr ng-repeat="entity in list"> <!-- 你可以吧repeat当成foreach来理解 其中 list是上面接收的集合 entity是用来循环展示的变量 -->
				<td><input type="checkBox"></td>
				<td>{{entity.unitName}}</td>  <!-- 通过对象.属性的方式来进行一个展示数据 -->
				<td>{{entity.organizationalCode}}</td>
				<td>{{entity.nameOfTheComplainant}}</td> 
</tr>
<!-- 最后在你的前台html界面上进行一个插件html的引入-->
<tm-pagination conf="paginationConf"></tm-pagination>

　　最后展示后台代码：查询所有的的代码我就不展示了，反正也是得返回一个pagebean 要不然你前台获取的时候获取不到相对应的值

　　　　@RequestMapping("/pagefind")
	@ResponseBody
	public PageBean pagefind(Integer pageNum,Integer pageSize){
		PageBean pageBean = new PageBean();
		pageBean.setPageSize(pageSize);
		pageBean.setPageNum(pageNum);
		List<RegistrationOfCases> selectByPageBean = firstService.selectByPageBean(pageBean);
		pageBean.setRows(selectByPageBean);
		pageBean.setTotal(selectByPageBean.size());
		return pageBean;  
	}

angular js 实现分页

相关文章