1

Javascriptを介してページ付けメニューを正しく表示するための数学は、私を狂わせています。うまくいけば、これを私より少しよく理解している誰かが私を助けることができます。

必要なのは、JavaScriptを使用してクライアント側でページ付けメニューを適切に表示する方法を理解することだけです。

合計10個のアイテムがあるとします。

一度に表示したい最大値は1です。

メニューには5つの数字が表示され、最後の数字のセットがない場合は、最後の数字が...の付いた最後のページになります。

したがって、たとえば<1 2 3 4 ... 10>

ユーザークリック2-開始番号は1、最後の4 <1 2 3 4...10>である必要があります

ユーザーが4-をクリックします-開始番号は2、最後は5 <2 3 4 5 ...10>

ユーザークリック5-開始は3、最後は6 <3 4 5 6 ... 10>

ユーザーが7をクリックします-最後のセットにいるので<678 9 10>

これまでのところ、私が持っているのは次のとおりです。

var pages = Math.ceil(count / amount);
var maxIterations = 5;
var iterations = Math.min(pages, maxIterations);
var offset = Math.max(0, page-Math.round(maxIterations/2));
for(var i=0; i<iterations; i++) {
    var label = page + i;
    if(i == maxIterations-1) label = pages; //Last page number
    paginatorObjects.push({label: label}); //This create the menu button
}

基本的に重要なのは、ユーザーが矢印ボタンを使用せずに番号をクリックするときに（グーグルがどのように行うか）、番号を上下に繰り返す必要があるということです。jQueryにはこの種のプラグインがあることは理解していますが、これはバニラJavaScriptで実行する必要があります。

4

2 に答える 2

4

この問題により、しばらく頭を悩ませていました。最近、AngularJSアプリケーションに実装する必要がありましたが、ページネーションロジックは純粋なJavaScriptです。

http://codepen.io/cornflourblue/pen/KVeaQLにCodePenの実用的なデモがあります

私もこのブログ投稿に詳細を書きました

これがページネーションロジックです

function GetPager(totalItems, currentPage, pageSize) {
    // default to first page
    currentPage = currentPage || 1;

    // default page size is 10
    pageSize = pageSize || 10;

    // calculate total pages
    var totalPages = Math.ceil(totalItems / pageSize);

    var startPage, endPage;
    if (totalPages <= 10) {
        // less than 10 total pages so show all
        startPage = 1;
        endPage = totalPages;
    } else {
        // more than 10 total pages so calculate start and end pages
        if (currentPage <= 6) {
            startPage = 1;
            endPage = 10;
        } else if (currentPage + 4 >= totalPages) {
            startPage = totalPages - 9;
            endPage = totalPages;
        } else {
            startPage = currentPage - 5;
            endPage = currentPage + 4;
        }
    }

    // calculate start and end item indexes
    var startIndex = (currentPage - 1) * pageSize;
    var endIndex = startIndex + pageSize;

    // create an array of pages to ng-repeat in the pager control
    var pages = _.range(startPage, endPage + 1);

    // return object with all pager properties required by the view
    return {
        totalItems: totalItems,
        currentPage: currentPage,
        pageSize: pageSize,
        totalPages: totalPages,
        startPage: startPage,
        endPage: endPage,
        startIndex: startIndex,
        endIndex: endIndex,
        pages: pages
    };
}
于 2016-01-31T01:14:30.600 に答える
2

私がやったのはこれです。これは私のソースコードから直接のものであるため、意味をなさないテンプレートロジックがいくつかありますが、将来これを読む可能性のある人は、ニーズに応じて調整できるはずです。

function paginate() {
    var paginator = sb.find('#' + moduleName + 'Pagination')[0];
    var container = paginator.getElementsByClass('container')[0];
    sb.dom.clearAll(container);
    if(count && count > 0) {
        sb.dom.removeClass(paginator, 'hidden');
        var pages = Math.ceil(count / amount);
        var maxIterations = 5;
        var iterations = Math.min(pages, maxIterations);
        var paginatorObjects = [];
        var center = Math.round(maxIterations/2);
        var offset = page-center;
        if(page < center) offset = 0; //Don't go lower than first page.
        if(offset + iterations > pages) offset -= (offset + iterations) - pages; //Don't go higher than total pages.
        for(var i=0; i<iterations; i++) {
            var label = (i+1) + offset;
            paginatorObjects.push({label: label});
        }
        sb.template.loadFrom(templateUrl, 'paginator').toHTML(paginatorObjects).appendTo(container, function(template) {
            var pageNumber = template.obj.label;

            if(pageNumber != page) {
                sb.addEvent(template, 'click', function() {                     
                    getAppointments(pageNumber);
                });
            } else {
                sb.dom.addClass(template, 'highlight');
            }               
        });

        if(offset + iterations < pages) {
            var dots = document.createTextNode(' ... ');
            container.appendChild(dots);
            sb.template.loadFrom(templateUrl, 'paginator').toHTML({label: pages}).appendTo(container, function(template) {
                sb.addEvent(template, 'click', function() {
                    getAppointments(pages);
                });
            });
        }

        var backBtn = paginator.getElementsByClass('icon back')[0];
        var forwardBtn = paginator.getElementsByClass('icon forward')[0];


        sb.removeEvent(backBtn, 'click');
        sb.removeEvent(forwardBtn, 'click');

        if(page - 1 > 0) {              
            sb.dom.removeClass(backBtn, 'hidden');
            sb.addEvent(backBtn, 'click', function() {
                getAppointments(page-1);                    
            });
        } else {
            sb.dom.addClass(backBtn, 'hidden');
        }

        if(page + 1 <= pages) {
            sb.dom.removeClass(forwardBtn, 'hidden');               
            sb.addEvent(forwardBtn, 'click', function() {
                getAppointments(page+1);                    
            });
        } else {
            sb.dom.addClass(forwardBtn, 'hidden');
        }

    } else {            
        sb.dom.addClass(paginator, 'hidden');
    }
}

ボタンからgetAppointments（）が呼び出されると、AJAXを使用して次のページの結果を取得します。次に、このpagination（）関数がその関数から再度呼び出されるため、すべてがリセットされます。ページごとに表示する量と現在のページ番号を決定する変数は（コンテナ関数に対して）グローバルであり、このコードサンプルには表示されていません。

この背後にあるロジックはかなり単純です。中心が決定され（私の場合、一度に表示される最大値は5であるため、中心は3です）、ページ番号に基づいてオフセットが計算されます。4をクリックすると開始番号が+1に調整され、2をクリックすると開始番号が-1に調整されます。

于 2012-08-21T04:31:59.233 に答える