本文主要和大家分享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 pagination分页插件详解
以上就是jquery 分页的两种实现方法的详细内容。