Impaginazione non funziona:

Question

Io sono la visualizzazione impaginazione nella mia applicazione utilizza seguente JavaScript, il suo bel lavoro per me, ma ho bisogno di rompere l'impaginazione dopo 5 pagine

Questo è il mio esistenti impaginazione

1234567891011121314151617181920

ma ho bisogno di visualizzare l'impaginazione seguendo

12345 ...... 151617181920

Se scatto a pagina numero 5 poi dovrebbe aggiungere altre 5 pagine alla pagina corrente

mio javscript come questo

<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> 

se ogni suggerimento sarà apprezzabile

Ecco l'JSfiddle

Answer 1

Ecco un nuovo jsfiddle fare quello che si vuole fare:

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

La funzione showPageNav è stata modificata in questo modo:

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; 

}