demo里非常全
附链接地址:http://blog.csdn.net/luoyeyu1989/article/details/7000865
原来:
1,下载3个文件
分别为:jquery-1.7.1.js、jquery.pagination.js、pagination.css
批注:
(1)jquery.js和jquery.pagination.js插件的加载有先后顺序,不能颠倒。特别是在复杂的页面中。
(2)jquery.pagination.js实现可以有很多种。不同的分页插件,使用时可能会有差别,所以最好有足够的js功底,读懂那些插件是如何实现,以及如何引用。
(3)pagination.css是样式,可以独立出来。也即可以使用很多种不同的样式修饰,不必是给出的那一个。
避免初始化重复加载 加一个状态:
第一次加载且求出数据和分页大小,分页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>');
$("#online_ajax").val(1);
});
} 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;
}