1

I'm trying to create paging in JavaScript, similar to most paging you see now, where if there's a lot of pages, it will use dots to break up the page display. I.e., (1 2 ... 22 23 24 25 26 27 28 ... 110 111)

Here's the code I have so far, however this isn't working. I only displays the current page. Any ideas what I'm missing here?

Just for FYI - You'll notice I'm using _.range(), this is from Underscore.js and $.inArray(), this is from jQuery.

You'll also notice i have iPage, by default my paging starts at 0 (page is the current page index I'm on), so I'm just adding 1 for the sake of this display - I've tried both ways and I get the same issue.

Thanks a lot for any help!

EDIT: I just added an else statement below, now it shows (1 2 3 21), 21 being the last page, 1 being the page I'm on.

var midRange = 7;
var paging = '';
var iPage = page + 1;

if(totalPages > 10) {

    var startRange = iPage - Math.floor(midRange / 2);
    var endRange   = page + Math.floor(midRange / 2);

    if(startRange <= 0) {
        endRange += Math.abs(startRange + 1);
        startRange = 1;
    }

    if(endRange > totalPages) {
        startRange -= (endRange - totalPages);
        endRange = totalPages;
    }

    var range = _.range(startRange, endRange);

    for(i = 1; i <= totalPages; i++) {

        if(range[0] > 2 && i == range[0]) {
            paging += ' ... ';
            console.log(paging);
        }

        inArray = $.inArray(i, range);

        if (inArray > -1)
            isInArray = true;
        else 
            isInArray = false;

        if(i == 0 || i == totalPages || isInArray) {
            if(i == iPage) {
                paging += '<a href="#"><b>'+i+'</b></a>';
                console.log(paging);
            } else {
                paging += '<a href="#">'+i+'</a>';
            }
        }
        if(range[midRange-1] < totalPages && i == range[midRange-1]) {
            paging += ' ... ';
            console.log(paging);
        }                   
    }
} else {
    for(i = 1; i <= totalPages; i++) {

        if(i == iPage) {
            paging += '<a href="#"><b>'+i+'</b></a>';
            console.log(paging);
        } else {
            paging += '<a href="#">'+i+'</a>';
            console.log(paging);
        }
    }   
}
4

2 に答える 2

0

「対数」スタイルのページネーションの使用を検討してください。ここで私の投稿を参照してください: How to do page navigation for many, many pages? 対数ページ ナビゲーション。そうしないと、ナビゲーション リンクをクリックして「...」範囲の中間にあるページに移動するのは実際には簡単ではありません。私の回答には PHP と ASP のコードが含まれています。JavaScript に変換するのは難しくありません。

于 2013-01-07T11:07:19.470 に答える
0

nodejs +アンダースコア+ジェイド+ブートストラップでの私のソリューション

前:

var pages = 200;
var limit = 50;
var page = 2;
var _ = required('underscore')

index.jade

.pagination
    ul
        - if(page > 0)
            li
                a(href='/page/'+ page) Prev
        - var _next = 10, _prev = (page +1) - 10
        - if(pages - (page + 1) < _next) _next = pages - (page + 1)
        - if(_prev < 0) _prev = 1;
        - var range = _.range(_prev, page + (_next+2));
        - each i in range
            li(class=i==page+1?'active':null)
                a(href='/page/'+(i)) #{i}
        - if((page+1) < pages)
            li
                a(href='/page/'+ (page +1)) Next
于 2013-12-05T18:03:16.993 に答える