本文主要和大家分享jquery pagination 分頁的兩種實作方法，此外掛程式是jQuery的ajax分頁外掛。如果你用到此外掛作分頁的時候，涉及到的數據量大，可以採用異步加載數據，當數據不多的時候，直接一次性加載，方便簡單。
一：下載地址，及方法參數介紹
名 參數值
maxentries總條目數 必要的參數，並為每頁顯示 可選擇參數，且為連續10
#num_display_entries 連續分頁主體部分顯示的分頁項目數 選用參數，且預設為10
current_page 可選擇參數，且預設為0，表示第1頁
num_edge_entries 兩側顯示的首尾分頁的條目數量 可選的參數，預設為0 ## 字串，且選用參數，預設為"#"
prev_show_always 是否顯示「前一頁」分頁按鈕
二：引入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" />
<!-- 显示分页数据 --> <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;
}
}@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;
}<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中文網其他相關文章！
