分頁與中檔頁碼

我想在JavaScript中創建分頁，類似於現在看到的大多數分頁，如果有很多頁面，它將使用點來分解頁面顯示。（1 2 ... 22 23 24 25 27 28 ... 110 111）分頁與中檔頁碼

這是我到目前爲止的代碼，但這是行不通的。我只顯示當前頁面。任何想法，我在這裏失蹤？

僅供參考 - 您會發現我使用_.range()，這是來自Underscore.js和$.inArray()，這是來自jQuery。

您還會注意到我有iPage，默認情況下我的分頁從0開始（page是當前頁面索引），所以我只是爲了這個顯示而添加1 - 我已經嘗試兩種方式，我得到同樣的問題。

非常感謝您的幫助！

編輯：我剛剛在下面添加了一個else語句，現在它顯示（1 2 3 21），21是最後一頁，1是我正在瀏覽的頁面。

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); 
     } 
    } 
}

來源

2012-04-11 dzm

你可能會考慮使用「對數」風格的分頁。在這裏看到我的帖子：How to do page navigation for many, many pages? Logarithmic page navigation。否則，通過點擊導航鏈接，實際上並不容易到達'...'範圍中的任何頁面。 PHP和ASP中的代碼包含在我的答案中;它不應該很難轉換爲JavaScript。

來源

2013-01-07 11:07:19 Doin

我在+的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-05 18:03:16 Nechtan

分頁與中檔頁碼

回答

相關問題