标签：jquery 插件 pagination 使用
果学网-专注IT在线www.prismcollege.com
原文：http://zccst.iteye.com/blog/1415848，http://blog.csdn.net/luoyeyu1989/article/details/7000865
1，下载3个文件
当然这样的话数据会重复加载2次
--第一次
$(document).ready(function(){
getDataList(page_index);
});
---第二次
‘callback‘: pageselectCallback
暂时解决方法是：
第一次加载且求出数据和分页大小，分页count等，等callback的时候判断一个DOM或input的状态，然后修改即可，
如：
$(document).ready(function() {
$.ajax({
type: "get",
data: "page=‘‘ &S=" + S + "&domain=" + domain + "&pagesize="+dopagesize,
url: "<?php echo $cmsapi; ?>/news",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "jsonpNewsList",
success: function(data) {
if (data.result == 200) {
$(‘#aresult‘).empty();
if (!$.isEmptyObject(data.data.list)) {
$.each(data.data.list, function(a, list) { //装载对应分页的内容
$("#aresult").append(‘<li><span><a href=" detail-‘ + list.id + ‘.html"><div>‘ + list.title + ‘</div></a></span></li>‘);
});
} else {
$("#aresult").append(‘<li><span class="s_check"> 暂无数据</span></li>‘);
}
}
/**
* 初始化完成 显示分页
*/
initPagination(data.data.pages.itemCount, dopagesize);
},
error: function() {
alert(‘参数错误‘);
}
});
});
function initPagination(count, pagesize) {
// 创建分页
$("#Pagination").pagination(count, {//共24条
num_edge_entries: 1, //边缘页数 隐藏之前或之后个数
num_display_entries: 4, //主体页数显示8个多出隐藏
callback: pageselectCallback,
items_per_page: pagesize, //每页显示的3条目数 $this->pagesize
prev_text: "前一页",
next_text: "后一页"
});
}
function pageselectCallback(page_index, jq) { //page_index 前一个表示您当前点击的那个分页的页数索引值
/**
* 扩展: 查询客户的关键字搜索
*/
var search_type = $("#search_type").val();
var orderby = $("#orderby").val();
var keywords = ‘‘;
var search = {};
var online_ajax = $("#online_ajax").val();
if (online_ajax != 1) {
$.ajax({
type: "get",
data: "page=" + (page_index + 1) + " &S=" + S + "&domain=" + domain + "&pagesize=3",
url: "<?php echo $cmsapi; ?>/news",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "jsonpNewsList",
success: function(data) {
if (data.result == 200) {
$(‘#aresult‘).empty();
if (!$.isEmptyObject(data.data.list)) {
$.each(data.data.list, function(a, list) { //装载对应分页的内容
$("#aresult").append(‘<li><span><a href=" detail-‘ + list.id + ‘.html"><div>‘ + list.title + ‘</div></a></span></li>‘);
});
} else {
$("#aresult").append(‘<li><span class="s_check"> 暂无数据</span></li>‘);
}
}
},
error: function() {
alert(‘参数错误‘);
}
});
} else {
$("#online_ajax").val(‘2‘);
}
return false;
}
*********************************************************************************************************************
可以参考下如下改进：
说明
-----------
当您有很多很多数据，需要在网页中以分页的形式显示出来时，这个插件将会帮您创建分页。
使用说明
-----
在页面中引用jQuery和本分页的js及对应的css文件.
在body中创建一对容纳分页链接的标签。
给这个标签加上一个id或class属性(如： "News-Pagination").
这个属性将被用于jQuery选择器。
接下来，写一个含有new_page_index和paging_container这两个参数的js方法。这个方法是在你单击分页链接后的回调函数。
当你单击页码时，对应的页码会被选中。
function handlePaginationClick(new_page_index, pagination_container) {
// 这将选择20个内容数组中的元素
for(var i=new_page_id;i<;i++) {
$(‘#MyContentArea‘).append(content[i]);
}
return false;
}
这个回调函数中需要用到jQuery对dom操作的相关知识。
里面的代码就可以自己去写。
在页面初始化中，当你知道有很多记录要显示出来时，创建如下的分页元素：
// 第一个参数: 记录总数
// 第二个参数: 对象options
$("#News-Pagination").pagination(122, {
items_per_page:20, //pageSize每页最多显示多少条
callback:handlePaginationClick
});
这将在容器中创建分页的导航链接。您会看到
数字1-7，第一个数字是高亮显示的。当您单击另一个页码数字时，
高亮将会改变并且回调函数“handlePaginationClick”
被调用。
通过option和一些元素可以高度配置本插件。
可用的Options：
-----------------
以下为options的具体描述：
callback
当用户单击页码时，回调函数被调用.这个函数接收到两个参数: 新的页码index和分页容器（dom）.
如果回调函数返回false，则事件不执行.
分页中这个回调函数是必不可少的！
它应该包括你所补充的一些代码。
为了加快用户体验，你不应该在此通过AJAX来加载内容。相反，您可以预加载一些内容然后通过此函数来分页浏览。
默认值: "function(){return false;}".
current_page
分页初始化时，被选中的那一页. 也就是当前页
默认值: 0
items_per_page
pageSize，每页最多显示的记录数。
默认值: 10
link_to
分页上的链接. 通常分页是通过onclick事件来触发的. 如果这个链接包含id之类的参数等
, 它将会替换掉原始的分页链接.
默认值: "#"
num_display_entries
可见的页码数量. 建议设置为奇数（对称好看些）
默认值: 11
next_text
“下一页”的文字
默认值: "Next"
next_show_always
是否总是显示“下一页”。
默认值: `true`
prev_text
“上一页”的文字。
默认值: "Previous"
prev_show_always
是否总是显示“上一页”。
默认值: true
num_edge_entries
如果设置为1，则显示“首页”与“尾页”。你也可以把它设置大点的数，以便显示更多的链接。
默认值: 0
ellipse_text
当页码数之间的数字相差很远时，比如：1 2 3 ... 10 11 12
显示的字符(在span中)
默认值: "..."
load_first_page
如果为true则当插件初始化时回调函数被执行。如果你通过ajax来显示内容，那么在初始化分页插件时应把它设置为false;
默认值: true
自定义事件触发分页
----------------------------------------
// 跳到第5页
$("#News-Pagination").trigger(‘setPage‘, [4]);
// 下一页
$("#News-Pagination").trigger(‘nextPage‘);
// 上一页
$("#News-Pagination").trigger(‘prevPage‘);
注：如果指定的页码在页码的范围之内则触发分页事件，否则不触发。
下载地址：http://ishare.iask.sina.com.cn/f/21330704.html
说明下：
1：ie6下面CSS问题，由于IE6不支持多项选择类（如：".current .next"中间没有空格），导致样式不对。把pagination.css的最后一个样式去掉。
.pagination {
font-size: 80%;
}
.pagination a {
text-decoration: none;
border: solid 1px #AAE;
color: #15B;
}
.pagination a, .pagination span {
display: block;
float: left;
padding: 0.3em 0.5em;
margin-right: 5px;
margin-bottom: 5px;
min-width:1em;
text-align:center;
}
.pagination .current {
background: #eee;
color: #555;
border: solid 1px #AAE;
}
2：手动设置"link_to"属性（让页面的url地址像样，xxxxxx.html?id=123）：
标签：jquery 插件 pagination 使用
原文地址：http://blog.csdn.net/zhanjianshinian/article/details/45030911
