问题"转到"在分页中

时间:2018-06-17 16:41:52

标签: javascript jquery html

我得到了很少的拦截器"去"在我的分页中。主要问题是当我输入" number"在输入中,点击转到,页面正在改变但是"当前页面"在分页中没有活动,而且当我转到示例3的页面时,我无法使用" next"按钮,但我可以回到2,1。

function getPageList(totalPages, page, maxLength) {
    if (maxLength < 5) throw 'maxLength must be at least 5';

    function range(start, end) {
        return Array.from(Array(end - start + 1), (_, i) => i + start);
    }

    var sideWidth = maxLength < 9 ? 1 : 2;
    var leftWidth = (maxLength - sideWidth*2 - 3) >> 1;
    var rightWidth = (maxLength - sideWidth*2 - 2) >> 1;
    if (totalPages <= maxLength) {
        // no breaks in list
        return range(1, totalPages);
    }
    if (page <= maxLength - sideWidth - 1 - rightWidth) {
        // no break on left of page
        return range(1, maxLength-sideWidth-1)
            .concat([0])
            .concat(range(totalPages-sideWidth+1, totalPages));
    }
    if (page >= totalPages - sideWidth - 1 - rightWidth) {
        // no break on right of page
        return range(1, sideWidth)
            .concat([0])
            .concat(range(totalPages - sideWidth - 1 - rightWidth - leftWidth, totalPages));
    }
    // Breaks on both sides
    return range(1, sideWidth)
        .concat([0])
        .concat(range(page - leftWidth, page + rightWidth))
        .concat([0])
        .concat(range(totalPages-sideWidth+1, totalPages));
}

$(function () {
    // Number of items and limits the number of items per page
    var numberOfItems = $('#jar .content').length;
    var limitPerPage = 4;
    // Total pages rounded upwards
    var totalPages = Math.ceil(numberOfItems / limitPerPage);
    // Number of buttons at the top, not counting prev/next,
    // but including the dotted buttons.
    // Must be at least 5:
    var paginationSize = 8;
    var currentPage;

    function showPage(whichPage) {
        if (whichPage < 1 || whichPage > totalPages) return false;
        currentPage = whichPage;
        $('#jar .content').hide()
            .slice((currentPage-1) * limitPerPage,
                currentPage * limitPerPage).show();
        // Replace the navigation items (not prev/next):
        $('.pagination li').slice(1, -1).remove();
        getPageList(totalPages, currentPage, paginationSize).forEach( item => {
            $('<li>').addClass('page-item')
            .addClass(item ? 'current-page' : 'disabled')
            .toggleClass('active', item === currentPage).append(
                $('<a>').addClass('page-link').attr({
                    href: 'javascript:void(0)'}).text(item || '...')
            ).insertBefore('#next-page');
    });
        // Disable prev/next when at first/last page:
        $('#previous-page').toggleClass('disabled', currentPage === 1);
        $('#previous-slick').toggleClass('slick-disabled', currentPage === 1);
        $('#next-page').toggleClass('disabled', currentPage === totalPages);
        $('#next-slick').toggleClass('slick-disabled', currentPage === totalPages);

        return true;
    }

    // Include the prev/next buttons:
    $('.pagination').append(
        $('<li>').addClass('page-item').attr({ id: 'previous-page' }).append(
            $('<button>').addClass('page-link slick-prev').attr({ id: 'previous-slick' }).text('prev')
        ),
        $('<li>').addClass('page-item').attr({ id: 'next-page' }).append(
            $('<button>').addClass('page-link slick-next').attr({ id: 'next-slick' }).text('next')
        )
    );
    // Show the page links
    $('#jar').show();
    showPage(1);

    // Use event delegation, as these items are recreated later
    $(document).on('click', '.pagination li.current-page:not(.active)', function () {
        return showPage(+$(this).text());
    });
    $('#next-page').on('click', function () {
        return showPage(currentPage+1);
    });

    $('#previous-page').on('click', function () {
        return showPage(currentPage-1);
    });

    var $btn = $('.go-to');

    $btn.on('click', function () {
        var $inputPageVal = $('input.page-number').val();

        return showPage($inputPageVal);
    })
});

这也是JsFiddle检查问题所在:http://jsfiddle.net/yf0g1ceh/12/

1 个答案:

答案 0 :(得分:0)

您可以根据class EmailAuthForm(AuthenticationForm): def clean_username(self): return self.cleaned_data["username"].lower() 等条件禁用上一个/下一个按钮,该条件会考虑数据类型。如果您将字符串url(r'^login/$', auth_views.LoginView.as_view(authentication_form=EmailAuthForm), name="login") 与数字currentPage === totalPages进行比较,则结果为6

尽量确保用整数调用函数。

例如:

6