Jquery 下一个 上一个 寻呼机

Question

我终于找到了一个能够完成我的项目的插件。

但我意识到的一件事是，这个插件只有页码，但没有下一个和上一个以及“...”来掩盖多个页码（如果有很多）。

这个插件是在 2013 年完成的，我认为寻求支持已经不存在了。我不擅长 Javascript 和 Jquery，也不知道如何自己编写代码。

有哪位好心人能帮我解决这个问题？

下面是代码：

$(document).ready(function() {
    $('.search-res-list').each(function() {
        var currentPage = 0;
        var numPerPage = 4;
        var $grid = $(this);
        $grid.bind('repaginate', function() {
            $grid.find('.search-res-row').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
        });
        $grid.trigger('repaginate');
        var numRows = $grid.find('.search-res-row').length;
        var numPages = Math.ceil(numRows / numPerPage);
        var $pager = $('<div class="pager">Page </div>');
        for (var page = 0; page < numPages; page++) {
            $('<span class="page-number"></span>').text(page + 1).bind('click', {
                newPage: page
            }, function(event) {
                currentPage = event.data['newPage'];
                $grid.trigger('repaginate');
                $(this).addClass('active').siblings().removeClass('active');
            }).appendTo($pager).addClass('clickable');
        }
        $pager.insertBefore($grid).find('span.page-number:first').addClass('active');
    });
});

提前感谢您的帮助！

Answer 1

以下是如何在分页中添加上一个和下一个按钮并使它们起作用：

$('.search-res-list').each(function() {
        var currentPage = 0;
        var numPerPage = 4;
        var $grid = $(this);
        $grid.bind('repaginate', function() {
            $grid.find('.search-res-row').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
        });
        $grid.trigger('repaginate');
        var numRows = $grid.find('.search-res-row').length;
        var numPages = Math.ceil(numRows / numPerPage);
        if(numPages < 10){ /* do this if you want to have 01,02 format (till 10 of course) */
            numPages = '0'+numPages;
        }else{   
            numPages = numPages;
        }
        if(numPages == 0){
            numPages = '01';
        }
        var $pager = $('<div class="paged_links productNavLinks"><div class="content-area"><span class="pagexofy"></span></div></div>');
        var innerWrap = $pager.find('.pagexofy');
        for (var page = 0; page < numPages; page++) {
            $('<span></span>').text(page + 1).bind('click', {
                newPage: page
            }, function(event) {
                currentPage = event.data['newPage'];
                $grid.trigger('repaginate');
                $(this).addClass('active').siblings().removeClass('active');
            }).appendTo(innerWrap).addClass('clickable');
        }
        $pager.insertBefore($grid);
        $pager.clone().insertAfter($grid); /* do this if you want to show pagination both on top and bottom */
        $pager.find('span.clickable:first').addClass('active');
        jQuery("span.clickable").each(function(){
            var currentText = jQuery(this).text();
            if(currentText < 10){
                var newText = '0'+currentText;
                jQuery(this).text(newText);
            }
        });
        var firstNav = jQuery("span.clickable.active").text();
        var finalCount = '<span class="prev page-numbers"></span><span class="pageNavigation">PAGE <span class="firstPageNumLink">'+firstNav + '</span>/' + numPages+'</span><span class="next page-numbers"></span>';
        jQuery(".productNavLinks .pagexofy").append(finalCount);

        jQuery(".paged_links.productNavLinks").each(function(){
            jQuery(this).find("span[class^='clickable']:first").addClass('firstPagerNav');
            jQuery(this).find("span[class^='clickable']:last").addClass('lastPagerNav');
        });

        jQuery(".paged_links.productNavLinks .next").click(function(){
            jQuery(".paged_links.productNavLinks span.clickable.active").next(".paged_links.productNavLinks span[class^='clickable']").click();
            var activeNav = jQuery("span.clickable.active").text();
            jQuery(".firstPageNumLink").text(activeNav);
            if(jQuery(".clickable.firstPagerNav").hasClass('active')){
                jQuery(".paged_links.productNavLinks .prev").hide();
            }else{
                jQuery(".paged_links.productNavLinks .prev").show();
            }
            if(jQuery(".clickable.lastPagerNav").hasClass('active')){
                jQuery(".paged_links.productNavLinks .next").hide();
            }else{
                jQuery(".paged_links.productNavLinks .next").show();
            }
        });
        jQuery(".paged_links.productNavLinks .prev").click(function(){
            jQuery(".paged_links.productNavLinks span.clickable.active").prev(".paged_links.productNavLinks span[class^='clickable']").click();
            var activeNav = jQuery("span.clickable.active").text();
            jQuery(".firstPageNumLink").text(activeNav);
            if(jQuery(".clickable.firstPagerNav").hasClass('active')){
                jQuery(".paged_links.productNavLinks .prev").hide();
            }else{
                jQuery(".paged_links.productNavLinks .prev").show();
            }
            if(jQuery(".clickable.lastPagerNav").hasClass('active')){
                jQuery(".paged_links.productNavLinks .next").hide();
            }else{
                jQuery(".paged_links.productNavLinks .next").show();
            }
        });

        if(jQuery(".clickable.firstPagerNav").hasClass('active')){
            jQuery(".paged_links.productNavLinks .prev").hide();
        }
        if(jQuery(".clickable.lastPagerNav").hasClass('active')){
            jQuery(".paged_links.productNavLinks .next").hide();
        }

    });