本文主要和大家分享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
三：准备jsp页面元素
酷纬企业网站管理系统Kuwebs是酷纬信息开发的为企业网站提供解决方案而开发的营销型网站系统。在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS，遵循SEO标准。 1.支持中文、英文两种版本，后台可以在不同的环境下编辑中英文。 3.程序和界面分离，提供通用的PHP标准语法字段供前台调用，可以为不同的页面设置不同的风格。 5.支持google地图生成、自定义标题、自定义关键词、自定义描
四：实现异步加载
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 = ''
for (var i = 0; i < list.length; i++) {
html += "
" + list[i].name + "
"
}
html += '';
$('.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 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 map = new HashMap();
//查询总记录数
int total = mapService.countNumb();
map.put("total", total);
//查询当前页面需要的数据
List pList = mapService.getPeopleList(people);
map.put("pList", pList);
return map;
} mapper配置sql语句
五：实现一次性加载
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 = '' for (var i = showNum * index; i < showNum * index + showNum; i++) { if (i < dataL) { html += "
" + data[i].name + "
" } } html += ''; $('.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
getPeopleList(HttpServletRequest request){ List pList = mapService.getPeopleList(); return pList; }
mapper配置sql语句
相关推荐：
