Warning: file_get_contents(/data/phpspider/zhask/data//catemap/6/rest/5.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript jQuery插件quickPager下一个/上一个链接_Javascript_Jquery_Pagination - Fatal编程技术网

Javascript jQuery插件quickPager下一个/上一个链接

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

我正在处理的一个站点正在使用jQuery分页插件,我需要添加一个next/prev按钮,目前它只显示页码,不支持next和previous按钮。下面是插件的代码,我不确定如何在中添加此功能

(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下一个