分頁不工作：

Question

我使用下面的JavaScript在我的應用程序中顯示分頁，它的工作對我來說很好，但我需要經過分頁

123

這5頁是我現有的打破分頁4567891011121314151617181920

，但我需要通過以下

12345顯示分頁...... 151617181920

，如果我在頁面數5，然後點擊它應該增加5頁到當前頁

我Javscript這樣

<script type="text/javascript"> 

function Pager(tableName, itemsPerPage) { 
    this.tableName = tableName; 
    this.itemsPerPage = itemsPerPage; 
    this.currentPage = 1; 
    this.pages = 0; 
    this.inited = false; 

    this.showRecords = function(from, to) { 
     var rows = document.getElementById(tableName).rows; 
     // i starts from 1 to skip table header row 
     for (var i = 1; i < rows.length; i++) { 
      if (i < from || i > to) 
       rows[i].style.display = 'none'; 
      else 
       rows[i].style.display = ''; 
     } 
    } 
    this.showPage = function(pageNumber) { 
     if (! this.inited) { 
      alert("not inited"); 
      return; 
     } 
     var oldPageAnchor = document.getElementById('pg'+this.currentPage); 
     oldPageAnchor.className = 'pg-normal'; 
     this.currentPage = pageNumber; 
     var newPageAnchor = document.getElementById('pg'+this.currentPage); 
     newPageAnchor.className = 'pg-selected'; 
     var from = (pageNumber - 1) * itemsPerPage + 1; 
     var to = from + itemsPerPage - 1; 
     this.showRecords(from, to); 
    } 

    this.prev = function() { 
     if (this.currentPage > 1) 
      this.showPage(this.currentPage - 1); 
    } 

    this.next = function() { 
     if (this.currentPage < this.pages) { 
      this.showPage(this.currentPage + 1); 
     } 
    } 

    this.init = function() { 
     var rows = document.getElementById(tableName).rows; 
     var records = (rows.length - 1); 
     this.pages = Math.ceil(records/itemsPerPage); 
     this.inited = true; 
    } 

    this.showPageNav = function(pagerName, positionId) { 
     if (! this.inited) { 
      alert("not inited"); 
      return; 
     } 
     var element = document.getElementById(positionId); 
     var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> <img src="${ctx}/images/prev.PNG" alt=" « Prev" height="17px" width="26px" style="vertical-align: middle;"/>&nbsp; </span> '; 
     for (var page = 1; page <= this.pages; page++) 
     pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> '; 
     pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal">&nbsp;<img src="${ctx}/images/nexts.png" alt="Next »" height="17px" width="26px" style="vertical-align: middle;"/></span>'; 
     element.innerHTML = pagerHtml; 
    } 
} 


</script> 

如果任何建議將是明顯的

這裏是JSfiddle

Answer 1

下面是一個新的jsfiddle做你想做的事：

http://jsfiddle.net/nye7a/2/

showPageNav功能已更改，如下所示：

this.showPageNav = function(pagerName, positionId) { 

var pageIndex = this.currentPage, 
    pageCount = this.pages, 
    start = Math.max(1, pageIndex - 4), 
    end = Math.min(pageCount, pageIndex + 4), 
    start2 = pageCount-4, 
    end2 = pageCount; 

    if (start2 <= end) 
     end = pageCount; 

if (! this.inited) { 

alert("not inited"); 

return; 

} 

var element = document.getElementById(positionId); 

var pagerHtml = ''; 

// adds the Prev button only if needed 
if (pageIndex > 1) 
    pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> '; 

    // paging from 1 to 5 
    for (var page = start; page <= end; page++) { 

pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> '; 
    } 

    // paging from pageCount-5 to pageCount 
    if (end != pageCount) { 
     pagerHtml += '<span>...</span>'; 

     for (var page = start2; page <= end2; page++) { 

    pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> '; 
     } 
    } 

// adds the Next button only if needed 
if (pageIndex < pageCount && pageCount > 1)  
    pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>'; 

element.innerHTML = pagerHtml; 

}