jquery pagination分页

 

效果图展示，因为只是一个简单的demo，所以代码和样式看起来比较简单

 

一：pagination插件相关文件的下载地址，以及方法参数介绍

 

下载地址：http://www.jq22.com/jquery-info19062

名	                描述	                                 参数值 
maxentries	        总条目数 	                         必选参数，整数 
items_per_page 	        每页显示的条目数 	                 可选参数，默认是10 
num_display_entries	连续分页主体部分显示的分页条目数 	         可选参数，默认是10 
current_page 	        当前选中的页面 	                         可选参数，默认是0，表示第1页 
num_edge_entries	两侧显示的首尾分页的条目数	         可选参数，默认是0 
link_to	                分页的链接 	                         字符串，可选参数，默认是"#" 
prev_text 	        “前一页”分页按钮上显示的文字	         字符串参数，可选，默认是"Prev" 
next_text 	        “下一页”分页按钮上显示的文字 	         字符串参数，可选，默认是"Next" 
ellipse_text 	        省略的页数用什么文字表示	                 可选字符串参数，默认是"…" 
prev_show_always	是否显示“前一页”分页按钮	                 布尔型，可选参数，默认为true，即显示“前一页”按钮 
next_show_always 	是否显示“下一页”分页按钮 	                 布尔型，可选参数，默认为true，即显示“下一页”按钮 
callback 	        回调函数 	                         默认无执行效果 

二：引入jquery.js、jquery.pagination.js和pagination.css文件

 

<script src="js/jquery.min.js"></script>
<script src="js/jquery.pagination.js"></script>
<link href="js/pagination.css" rel="stylesheet" type="text/css" />

 

三：准备jsp页面元素容器

 

<!--  这里显示数据 -->
<div id="htmlDiv"></div>

<!-- 这里显示分页,注意class属性必须是 class="pagination",否则会影响样式-->
<center><div id="Pagination" class="pagination"></div></center>

 

四：js相关代码

 

$(function() {

 var pageSize = 3;// 定义每页显示记录条数

 init();// 初始化函数

 /**
  * 因为pagination插件初始化需要数据的总条目数作为参数 所以init函数作用就是查询总条目数
  */
 function init() {
   $.ajax({
	type : "GET",
	url : "/webDemo/page/getTotal.do",
	async : false, // 因为需要赋值,不可以异步
	success : function(total) {
	// 分页按钮属性定义
	$("#Pagination").pagination(total, {
		callback : PageCallback, // 点击分页按钮的回调函数
		items_per_page : pageSize, // 每页显示的条目数
		prev_text : '上一页', // "前一页"分页按钮上显示的文字
		next_text : '下一页', // "后一页"分页按钮上显示的文字
		num_display_entries : 4, // 连续分页主体部分显示的分页条目数
		num_edge_entries : 1, // 两侧显示的首尾分页的条目数
	  });
    }
  });
}

 // 分页按钮点击事件
 function PageCallback(page, jq) { // page表示当前页索引值，jq表示装载容器。
    getPage(page);
 }

// 去后台加载数据，并拼接显示出来
function getPage(page) { // 参数就是点击的那个分页的页数索引值
  $.ajax({
    type : "GET",
    url : "/webDemo/page/getPage.do?page=" + page + "&pageSize=" + pageSize,
	dataType : "json",
	success : function(data) {
		// 拼接html(这个部分根据自己的需求去实现)
		var list = data.users;
		var htm = '';
		for (var i = 0; i < list.length; i++) {
		htm += "<center><div><p>"
		htm += "<span>ID:" + list[i].id + "</span>";
		htm += "<span>姓名:" + list[i].name + "</span>";
		htm += "<span>性别:" + list[i].sex + "</span>";
		htm += "</p></div></center>"
	 }
    $('#htmlDiv').html(htm)
	}
  });
 }
});

 

五：PageController代码

 

package com.mote.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping(value = "/page")
public class PageController {
	
	@Autowired
	private PageService pageService;
	

	@RequestMapping(value="/getTotal",method = RequestMethod.GET)
	@ResponseBody
	public int getTotal() {
		//查询总记录数
		int count = pageService.count();
		return count;
	}
	
	@RequestMapping(value="/getPage",method = RequestMethod.GET)
	@ResponseBody
	public Map<String, Object> getPage(@RequestParam("page")int page,
			@RequestParam("pageSize")int pageSize) {
		
		Map<String, Object> map = new HashMap<String,Object>();
		
		//计算sql语句limit的起始索引值
		int offset = pageSize * page;
		
		//查询当前页数据
		List<User> users = pageService.getUsers(offset,pageSize);
        map.put("users", users);  

		return map;
	}

}

 

六：相关的pojo和sql语句

 

pojo:

package com.mote.pojo;

public class User {
	
	private Integer id;
	private String name;
	private String sex;
	
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getSex() {
		return sex;
	}
	public void setSex(String sex) {
		this.sex = sex;
	}
}

sql:

 

<select id="count" resultType="int">
        SELECT count(1)
        FROM user
</select>
<select id="getUsers" resultType="com.mote.pojo.User">
	SELECT * FROM user
	LIMIT #{offset},#{pageSize}
</select>

 

备注：若有错误，欢迎大家留言评论