0

ページネーション機能に prev と next li を追加したいと思います。関数自体は完全に機能し、ドロップダウン .val(); から受け取った表示したい行の量でページの量を示します。

function pagination() {
    $('table[data-provide=pagination]').each(function () {

        var $table = $('#foo');
        var $pager = $('<ul></ul>');

        var currentPage = 0;
        var numPerPage = $("#bar").val();
        var numRows = $table.find('.someclass').length;
        var numPages = Math.ceil(numRows / numPerPage);

        $table.unbind('repaginate');

        $table.bind('repaginate', function () {
            $table.find('.someclass').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
        });

        for (var page = 0; page < numPages; page++) {
            var link = '<a href="#">' + page + '</a>';

            $('<li></li>').html(link).on('click', {
                newPage: page
            }, function (event) {
                currentPage = event.data['newPage'];
                $table.trigger('repaginate');
                $(this).addClass('active').siblings().removeClass('active');
            }).appendTo($pager);
        };

        var prev = '<li id="pagiprev"><a href="#' + (currentPage - 1) + '">&laquo</a></li>';
        var next = '<li id="paginext"><a href="#' + (currentPage + 1) + '">&raquo</a></li>';

        $pager.append(next);
        $pager.prepend(prev);

        $pager.find("li:first-child").addClass('active');

        $($table.data('pager')).html($pager);
        $table.trigger('repaginate');
    });
};

今私は追加しました:

var prev = '<li id="pagiprev"><a href="#' + (currentPage - 1) + '">&laquo</a></li>';
var next = '<li id="paginext"><a href="#' + (currentPage + 1) + '">&raquo</a></li>';

$pager.append(next);
$pager.prepend(prev);

しかし、思ったほど簡単ではないようです。もちろん、次のページと前のページの次のページにジャンプするように次のページと前のページを作成するのがステップ 1 です。最初のページにいる場合は、前のボタンをクリックしてください。

4

0 に答える 0