Javascript jQuery插件quickPager下一个/上一个链接
我正在处理的一个站点正在使用jQuery分页插件,我需要添加一个next/prev按钮,目前它只显示页码,不支持next和previous按钮。下面是插件的代码,我不确定如何在中添加此功能Javascript jQuery插件quickPager下一个/上一个链接,javascript,jquery,pagination,Javascript,Jquery,Pagination,我正在处理的一个站点正在使用jQuery分页插件,我需要添加一个next/prev按钮,目前它只显示页码,不支持next和previous按钮。下面是插件的代码,我不确定如何在中添加此功能 (function($) { $.fn.quickPager = function(options) { var defaults = { pageSize: 10, currentPage: 1, holder: null, pag
(function($) {
$.fn.quickPager = function(options) {
var defaults = {
pageSize: 10,
currentPage: 1,
holder: null,
pagerLocation: "after"
};
var options = $.extend(defaults, options);
return this.each(function() {
var selector = $(this);
var pageCounter = 1;
var x = 0;
if( selector.parent("div.simplePagerContainer").length == 0 ) {
selector.wrap("<div class='simplePagerContainer'></div>");
}
selector.parents(".simplePagerContainer").find("ul.simplePagerNav").remove();
selector.children().each(function(i){
$(this)[0].className = $(this)[0].className.replace(/\bsimplePagerPage.*?\b/g, '');
if(!$(this).is(":hidden")) {
if(x < pageCounter*options.pageSize && x >= (pageCounter-1)*options.pageSize) {
$(this).addClass("simplePagerPage"+pageCounter);
}
else {
$(this).addClass("simplePagerPage"+(pageCounter+1));
pageCounter ++;
}
x++;
}
});
// show/hide the appropriate regions
selector.children().hide();
selector.children(".simplePagerPage"+options.currentPage).show();
if(pageCounter <= 1) {
return;
}
//Build pager navigation
var pageNav = "<ul class='simplePagerNav'>";
for (i=1;i<=pageCounter;i++){
if (i==0) {
}
if (i==options.currentPage) {
pageNav += "<li class='currentPage simplePageNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";
}
else {
pageNav += "<li class='simplePageNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";
}
}
pageNav += "</ul>";
if(!options.holder) {
switch(options.pagerLocation)
{
case "before":
selector.before(pageNav);
break;
case "both":
selector.before(pageNav);
selector.after(pageNav);
break;
default:
selector.after(pageNav);
}
}
else {
$(options.holder).append(pageNav);
}
//pager navigation behaviour
selector.parent().find(".simplePagerNav a").click(function() {
//grab the REL attribute
var clickedLink = $(this).attr("rel");
options.currentPage = clickedLink;
if(options.holder) {
$(this).parent("li").parent("ul").parent(options.holder).find("li.currentPage").removeClass("currentPage");
$(this).parent("li").parent("ul").parent(options.holder).find("a[rel='"+clickedLink+"']").parent("li").addClass("currentPage");
}
else {
//remove current current (!) page
$(this).parent("li").parent("ul").parent(".simplePagerContainer").find("li.currentPage").removeClass("currentPage");
//Add current page highlighting
$(this).parent("li").parent("ul").parent(".simplePagerContainer").find("a[rel='"+clickedLink+"']").parent("li").addClass("currentPage");
}
//hide and show relevant links
selector.children().hide();
selector.find(".simplePagerPage"+clickedLink).show();
return false;
});
});
}
})(jQuery);
试试这个:
var nextLink = '<li><a id="nextLink" href="#">Next</a></li>';
var prevLink = '<li><a id="prevLink" href="#">Prev</a></li>';
$(".simplePagerNav").prepend(prevLink).append(nextLink);
$("#nextLink").click(function(e) {
e.preventDefault();
$("li.currentPage").next("li[class^=simplePageNav]").find("a").click();
});
$("#prevLink").click(function(e) {
e.preventDefault();
$("li.currentPage").prev("li[class^=simplePageNav]").find("a").click();
});
试试这个:
var nextLink = '<li><a id="nextLink" href="#">Next</a></li>';
var prevLink = '<li><a id="prevLink" href="#">Prev</a></li>';
$(".simplePagerNav").prepend(prevLink).append(nextLink);
$("#nextLink").click(function(e) {
e.preventDefault();
$("li.currentPage").next("li[class^=simplePageNav]").find("a").click();
});
$("#prevLink").click(function(e) {
e.preventDefault();
$("li.currentPage").prev("li[class^=simplePageNav]").find("a").click();
});
我如何使用它像:prev 1 2。。。10下一个代替上一个1 2 3 4 5 6 7 8 9 10下一个我可以像这样使用它:上一个1 2。。。下一个代替上一个12345678910下一个