jquery.pagination.js分页插件的简单使用

来源：互联网发布：淘宝关闭订单规则编辑：程序博客网时间：2024/04/24 12:13

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="./jquery-1.8.3.min.js"></script>
<script src="./jquery.pagination.js"></script>
<body>
<div id="Pagination"></div>

<script>
var pageIndex = 0; //页面索引初始值
var pageSize = 15; //每页显示数据条数
$(function () { //$(document).ready(function(){}) 的简写，文档加载完自动执行
InitTable(0); //Load事件，初始化首页数据，页面索引为0（第一页）
var pageCount = 1000;
//分页，PageCount是总记录数，这是必选参数，其它参数都是可选,
//可以在php中计算出总记录数，发到模板页，就可以根据该总数来控制显示123的数目，
//比如总共就5条数据，一页就可以，分页中的23就不必显示，因为显示的话点击也是空值。
$("#Pagination").pagination(pageCount, {
callback: PageCallback, //PageCallback() 翻页调用此函数。
prev_text: "←上一页",
next_text: "下一页→",
items_per_page:pageSize,//每页显示数据条目数
num_edge_entries: 3, //当分页非常多时，两侧首尾分页条目数为3条，不显示的部分用省略号代替
num_display_entries: 9, //当分页非常多时，连续分页最多显示9条，不显示的部分用省略号代替
current_page: pageIndex, //当前页索引
});
//翻页调用
function PageCallback(index,jq) {
InitTable(index);
console.log(index);//打印看一下当前页索引是否正确，主要就是依据索引在php中使用limit获取数据
}
//请求数据
function InitTable(pageIndex) {
$.ajax({
type: "POST",
dataType: "text",
url: 'url', //提交到php页面请求数据
data: "pageIndex=" + (pageIndex+1) + "&pageSize=" + pageSize,
//提交两个参数：pageIndex(页面索引)，pageSize(显示条数)
success: function(data) {

//在此处理php返回的数据在php中需处理条数

if ($param['page']) {
$page=(($param['page']-1)*ITEMS_PER_PAGES).','.ITEMS_PER_PAGES;
} else {
$page='0,'.ITEMS_PER_PAGES;
}

}
});
}
});
</script>

<style>
.pagination a{
padding:5px 10px;
border-radius:10px;
background-color:#ccc;
}
.current{
padding:5px 10px;
border-radius:10px;
background-color:red;
color:#fff;
}
.prev,.next{

background-color: #ccc!important;
color:#000;
}
</style>
</body>

</html>

其中的参数：

参数描述
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 回调函数当点击链接的时候此函数被调用，此函数接受两个参数，新一页的id和pagination容器（一个DOM元素）。如果回调函数返回false，则pagination事件停止执行

插件的源代码：

0 0