由imtech_pager创建的有限jquery简单分页

时间:2016-08-01 16:03:35

标签: javascript jquery html pagination

我想限制这个简单的jquery分页

现在是---> 1 2 3 4 5 6 7 8 9 10

我想转换----> < 1 2 3 ...>

点击3 ---> < 2 3 4 ...>

我使用imtech_pager进行分页

<!--in imtech_pager.js -->

    var Imtech = {};
Imtech.Pager = function() {
    this.paragraphsPerPage = 3;
    this.currentPage = 1;
    this.pagingControlsContainer = '#pagingControls';
    this.pagingContainerPath = '#content';

    this.numPages = function() {
        var numPages = 0;
        if (this.paragraphs != null && this.paragraphsPerPage != null) {
            numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);
        }

        return numPages;
    };

    this.showPage = function(page) {
        this.currentPage = page;
        var html = '';

        this.paragraphs.slice((page-1) * this.paragraphsPerPage,
            ((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage).each(function() {
            html += '<div>' + $(this).html() + '</div>';
        });

        $(this.pagingContainerPath).html(html);

        renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());
    }

    var renderControls = function(container, currentPage, numPages) {
        var pagingControls = 'Page: <ul style="margin-left: -10px;">';
        for (var i = 1; i <= numPages; i++) {
            if (i != currentPage) {
                pagingControls += '<li><a href="#" onclick="pager.showPage(' + i + '); return false;">' + i + '</a></li>';
            } else {
                pagingControls += '<li>' + i + '</li>';
            }
        }

        pagingControls += '</ul>';

        $(container).html(pagingControls);
    }
}








<!--for pagination -->
var pager = new Imtech.Pager();
$(document).ready(function() {
    pager.paragraphsPerPage =12; // set amount elements per page
    pager.pagingContainer = $('#content'); // set of main container
    pager.paragraphs = $('div.z', pager.pagingContainer); // set of required containers
    pager.showPage(1);
});
<!-- jump script   -->
$(document).ready(function() {
    $(".jumper").on("click", function( e ) {
        e.preventDefault();
        $("body, html").animate({
            scrollTop: $( $(this).attr('href') ).offset().top
        }, 600);
    });
});
<div class="example">
 <div id="content">
<div class="z">one</div>
<div class="z">tow</div>
.
.
.
<div class="z">three</div>

</div>
</div>

<div id="pagingControls"></div>

我想转换为&lt; 1 2 3 ...&gt;

点击3后 - > &LT; 2 3 4 ...&gt;

请帮帮我

感谢

0 个答案:

没有答案