本文主要和大家分享jquery pagination 分页的两种实现方法，此插件是jQuery的ajax分页插件。如果你用到此插件作分页的时候，涉及到的数据量大，可以采用异步加载数据，当数据不多的时候，直接一次性加载，方便简单。
一：下载地址，及方法参数介绍
名 描述 参数值
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页面元素
<!-- 显示分页数据 --> <p class="list"></p> <!-- 显示页码 --> <p class="Pagination" id="pagination"></p>
四：实现异步加载
js代码：
$(function() {
var pageSize = 5; // 每页显示多少条记录
var total; // 总共多少记录
Init(0); // 注意参数，初始页面默认传到后台的参数，第一页是0;
$(".Pagination").pagination(total, {
callback : PageCallback,
prev_text : '上一页',
next_text : '下一页',
items_per_page : pageSize,
num_display_entries : 4, // 连续分页主体部分显示的分页条目数
num_edge_entries : 1, // 两侧显示的首尾分页的条目数
});
//点击上一页、下一页、页码的时候触发的事件
function PageCallback(index, jq) { // 前一个参数表示当前点击的那个分页的页数索引值，后一个参数表示装载容器。
Init(index);
}
function Init(pageIndex) { // 参数就是点击的那个分页的页数索引值
$.ajax({
type : "get",
url : ROOT + "/map/getPeopleList?rows=" + pageSize + "&page="
+ pageIndex,
async : false,
dataType : "json",
success : function(data) {
// 赋值total，用于计算
total = data.total;
//拼接html(这个部分根据自己的需求去实现)
var list = data.pList;
var html = '<p>'
for (var i = 0; i < list.length; i++) {
html += "<p>" + list[i].name + "</p>"
}
html += '</p>';
$('.list').html(html)
},
error : function() {
alert("请求超时，请重试！");
}
});
};
});后台代码：
pojo对象
package com.debo.map.pojo;
public class People {
private String name;
private int limit;//用于分页
private int Offset;//用于分页
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getLimit() {
return limit;
}
public void setLimit(int limit) {
this.limit = limit;
}
public int getOffset() {
return Offset;
}
public void setOffset(int offset) {
Offset = offset;
}
}
controller代码
@RequestMapping(value="/getPeopleList",method = RequestMethod.GET)
@ResponseBody
public Map<String,Object> getPeopleList(HttpServletRequest request){
//创建对象，封装查询条件
People people = new People();
//获取每页记录数
int limit = Integer.parseInt(request.getParameter("rows"));
people.setLimit(limit);
//获取当前页数
int page = Integer.parseInt(request.getParameter("page"));
people.setOffset(page*limit);
Map<String, Object> map = new HashMap<String,Object>();
//查询总记录数
int total = mapService.countNumb();
map.put("total", total);
//查询当前页面需要的数据
List<People> pList = mapService.getPeopleList(people);
map.put("pList", pList);
return map;
}mapper配置sql语句
<select id="countNumb" resultType="int">
SELECT count(1)
FROM people
</select>
<select id="getPeopleList" resultType="com.debo.map.pojo.People">
SELECT * FROM people
LIMIT #{offset},#{limit}
</select>
五：实现一次性加载
js代码：
$(function() {
//默认每一页显示5条数据
getMsg(5)
//分页实现函数
function getMsg(num) {
$.ajax({
url : ROOT+'/map/getPeopleList',
type : 'GET',
dataType : 'json',
success : function(data) {
// 1.计算分页数量
var showNum = num;
var dataL = data.length;
var pageNum = Math.ceil(dataL / showNum);
$('.Pagination').pagination(pageNum,{
num_edge_entries : 1,
num_display_entries : 4,
prev_text : "<<",
next_text : ">>",
callback : function(index) {
var html = '<p>'
for (var i = showNum * index; i < showNum
* index + showNum; i++) {
if (i < dataL) {
html += "<p>" + data[i].name + "</p>"
}
}
html += '</p>';
$('.list').html(html)
})
}
})
}
}
})
后台代码：
pojo对象
package com.debo.map.pojo;
public class People {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}controller层代码
@RequestMapping(value="/getPeopleList",method = RequestMethod.GET)
@ResponseBody
public List<People> getPeopleList(HttpServletRequest request){
List<People> pList = mapService.getPeopleList();
return pList;
}mapper配置sql语句
<select id="getPeopleList" resultType="com.debo.map.pojo.People">
SELECT * from people
</select>相关推荐：
以上是jquery 分页的两种实现方法的详细内容。更多信息请关注PHP中文网其他相关文章！
