开发技术学习 »
前端设计 » jquery simplePage分页插件v1.0.0版,jquery分页
jquery simplePage分页插件v1.0.0版,jquery分页
参照easyPage插件的思路，写了自己的一个分页插件，感觉目前还够用，只有"首页 上一页 下一页 尾页"几个按钮
分页的内容都是事先加载完毕的，所以对于那些更新速度快和要求页面加载速度的有一点不实用。
看一下jquery分页的具体代码：
[php]
/**
* jQuery分页
* @author adophper.com
* @version 1.0.0
* @date 2013-01-21 17:00:00
* @param contentslist 内容列表
* @param pageId 分页div
* @param everyCount 每页显示的数据条数
* @param pagefirst 首页的class
* @param pageprev 上一页的class
* @param pagenext 下一页的class
* @param pagelast 尾页的class
* @param showPage 显示的页数,待完善
* 感谢 easypage原作者
*/
;(function($){
$.extend({
'simplePage':function(options){
options = $.extend({//参数设置
contentslist: "contentslist",//内容$("#id");
pageId: "pageId",//分页导航放置的DIV
everyCount: "5",//每页显示的数据条数
pagefirst: "first",
pageprev: "prev",
pagenext: "next",
pagelast: "last",
showPage: "3"
},
options);
var currentPage = 0;
var contents = $("."+options.contentslist);
var countPage = Math.ceil(contents.length/parseInt(options.everyCount));
//<a href="javascript:void(0)" class="prev" style="display:none;">上一页</a> <a href="javascript:void(0)" class="next">下一页</a>
//拼接分页按钮
var navigatehtml = "<a href='javascript:void(0)' class='"+options.pagefirst+"'>首页</a><a href='javascript:void(0)' class='"+options.pageprev+"'>上一页</a>";
//for(var i = 1;i <= countPage;i++){
// navigatehtml+='<a href="javascript:void(0)" class="pagenavigate">'+i+'</a>';
//}
navigatehtml+="<a href='javascript:void(0)' class='"+options.pagenext+"'>下一页</a><a href='javascript:void(0)' class='"+options.pagelast+"'>尾页</a>";
//加载分页按钮
$("#"+options.pageId).html(navigatehtml);
//得到所有数字分页
//var navigate = $(".pagenavigate");
//隐藏分页按钮
//$.extend({
// 'hidePagenavigate': function(){
// navigate.each(function(){
// $(this).hide();
// });
// }
//});
//显示分页按钮
//$.extend({
// 'showPagenavigate': function(currentnavigate){
// $.hidePagenavigate();
// var begin = currentnavigate>=options.showPage?currentnavigate-parseInt(options.showPage):0;
// if (begin>navigate.length-2*options.showPage){
// begin = navigate.length - 2 * options.showPage;
// }
// for (var i = begin; i < currentnavigate+parseInt(options.showPage); i++){
// $(navigate[i]).show();
// }
// }
//});
//显示当前分页内容
$.extend({
'showPage': function(currentPage){
//alert(currentPage);
contents.each(function(contentindex){
if (contentindex >= currentPage*options.everyCount && contentindex < (currentPage+1)*options.everyCount){
$(this).show();
}else{
$(this).hide();
}
});
if (currentPage == 0){
$("."+options.pagefirst).hide();
$("."+options.pageprev).hide();
$("."+options.pagenext).show();
$("."+options.pagelast).show();
}else if (currentPage == countPage - 1){
$("."+options.pagefirst).show();
$("."+options.pageprev).show();
$("."+options.pagenext).hide();
$("."+options.pagelast).hide();
}else{
$("."+options.pagefirst).show();
$("."+options.pageprev).show();
$("."+options.pagenext).show();
$("."+options.pagelast).show();
}
}
});
$.showPage(0);
//上一页
$("."+options.pageprev).click(function(){
//alert(currentPage);
currentPage--;
$.showPage(currentPage);
});
//下一页
$("."+options.pagenext).click(function(){
//alert(currentPage);
currentPage++;
$.showPage(currentPage);
});
//首页
$("."+options.pagefirst).click(function(){
currentPage = 0;
$.showPage(currentPage);
});
//尾页
$("."+options.pagelast).click(function(){
currentPage = countPage - 1;
$.showPage(currentPage);
});
}
});
})(jQuery)
[/php]
页面调用方法：
[php]
$(function(){
/**分页**/
$.simplePage({"contentslist":"listQ li","pageId":"leftPage","everyCount":5,"pagefirst":"first","pageprev":"prev","pagenext":"next","pagelast":"last","showPage":3});
});
[/php]