Zeige N Zeilen pro Seite in HTML-Tabelle

Question

Hallo Ich habe eine HTML-Tabelle mit vielen Zeilen und ich benutze einen JavaScript-Code, um eine Option Paginierung hinzuzufügen, funktioniert gut, aber wenn ich das Dokument lädt zeigt alle Zeilen und ich möchte Zeige nur 5, 10 oder was auch immer, aber nicht alle Reihen. Hier ist mein JavaScript-Code und die Arbeits Fiddle:

$(document).ready(function() { 
    getPagination('#Tabla'); 
}); 

function getPagination(table) { 

    $('#maxRows').on('change', function() { 
    $('.pagination').html(''); // reset pagination 
    var trnum = 0; // reset tr counter 
    var maxRows = parseInt($(this).val()); // get Max Rows from select option 
    var totalRows = $(table + ' tbody tr').length; // numbers of rows 
    $(table + ' tr:gt(0)').each(function() { // each TR in table and not the header 
     trnum++; // Start Counter 
     if (trnum > maxRows) { // if tr number gt maxRows 

     $(this).hide(); // fade it out 
     } 
     if (trnum <= maxRows) { 
     $(this).show(); 
     } // else fade in Important in case if it .. 
    }); // was fade out to fade it in 
    if (totalRows > maxRows) { // if tr total rows gt max rows option 
     var pagenum = Math.ceil(totalRows/maxRows); // ceil total(rows/maxrows) to get .. 
     // numbers of pages 
     for (var i = 1; i <= pagenum;) { // for each page append pagination li 
     $('.pagination').append('<li class"wp" data-page="' + i + '">\ 
             <span>' + i++ + '<span class="sr-only">(current)</span></span>\ 
            </li>').show(); 
     } // end for i 
    } // end if row count > max rows 
    $('.pagination li:first-child').addClass('active'); // add active class to the first li 
    $('.pagination li').on('click', function() { // on click each page 
     var pageNum = $(this).attr('data-page'); // get it's number 
     var trIndex = 0; // reset tr counter 
     $('.pagination li').removeClass('active'); // remove active class from all li 
     $(this).addClass('active'); // add active class to the clicked 
     $(table + ' tr:gt(0)').each(function() { // each tr in table not the header 
     trIndex++; // tr index counter 
     // if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out 
     if (trIndex > (maxRows * pageNum) || trIndex <= ((maxRows * pageNum) - maxRows)) { 
      $(this).hide(); 
     } else { 
      $(this).show(); 
     } //else fade in 
     }); // end of for each tr in table 
    }); // end of on click pagination list 


    }); 
} 

Fiddle:

Working Code

Answer 1

ich den Code geändert haben, prüfen diese. Die Funktion, die die Seitennummerierung erstellt, funktioniert wie sie ist. Nur geringfügige Änderungen ni Code

$(document).ready(function() { 
     $('#maxRows').on('change', function() { 
      getPagination('#Tabla',$(this).val()); 
     }); 
    getPagination('#Tabla',2); // the no of rows default you want to show 
}); 

function getPagination(table,noRows) { 

$('.pagination').html(''); // reset pagination 
    var trnum = 0; // reset tr counter 
    var maxRows = noRows; // get Max Rows from select option 
    var totalRows = $(table + ' tbody tr').length; // numbers of rows 
    $(table + ' tr:gt(0)').each(function() { // each TR in table and not the header 
     trnum++; // Start Counter 
     if (trnum > maxRows) { // if tr number gt maxRows 

     $(this).hide(); // fade it out 
     } 
     if (trnum <= maxRows) { 
     $(this).show(); 
     } // else fade in Important in case if it .. 
    }); // was fade out to fade it in 
    if (totalRows > maxRows) { // if tr total rows gt max rows option 
     var pagenum = Math.ceil(totalRows/maxRows); // ceil total(rows/maxrows) to get .. 
     // numbers of pages 
     for (var i = 1; i <= pagenum;) { // for each page append pagination li 
     $('.pagination').append('<li class"wp" data-page="' + i + '">\ 
             <span>' + i++ + '<span class="sr-only">(current)</span></span>\ 
            </li>').show(); 
     } // end for i 
    } // end if row count > max rows 
    $('.pagination li:first-child').addClass('active'); // add active class to the first li 
    $('.pagination li').on('click', function() { // on click each page 
     var pageNum = $(this).attr('data-page'); // get it's number 
     var trIndex = 0; // reset tr counter 
     $('.pagination li').removeClass('active'); // remove active class from all li 
     $(this).addClass('active'); // add active class to the clicked 
     $(table + ' tr:gt(0)').each(function() { // each tr in table not the header 
     trIndex++; // tr index counter 
     // if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out 
     if (trIndex > (maxRows * pageNum) || trIndex <= ((maxRows * pageNum) - maxRows)) { 
      $(this).hide(); 
     } else { 
      $(this).show(); 
     } //else fade in 
     }); // end of for each tr in table 
    }); // end of on click pagination list 
} 

Update your Fiddle

Answer 2

Sie eine der "maxRows" Optionen auf Dokument bereit auswählen kann. Zum Beispiel können Sie die letzte Option wählen:

$('#maxRows option:last').prop('selected', true).trigger('change'); 

Sie müssen das Änderungsereignis auslösen, so dass alle den „change“ -Ereignis nach neu geordnet werden.

Das Snippet:

$(document).ready(function() { 
 
    getPagination('#Tabla'); 
 
    $('#maxRows option:last').prop('selected', true).trigger('change'); 
 
}); 
 

 
function getPagination(table) { 
 

 
    $('#maxRows').on('change', function(e) { 
 
    $('.pagination').html(''); // reset pagination 
 
    var trnum = 0; // reset tr counter 
 
    var maxRows = parseInt($(this).val()); // get Max Rows from select option 
 
    var totalRows = $(table + ' tbody tr').length; // numbers of rows 
 
    $(table + ' tr:gt(0)').each(function() { // each TR in table and not the header 
 
     trnum++; // Start Counter 
 
     if (trnum > maxRows) { // if tr number gt maxRows 
 

 
     $(this).hide(); // fade it out 
 
     } 
 
     if (trnum <= maxRows) { 
 
     $(this).show(); 
 
     } // else fade in Important in case if it .. 
 
    }); // was fade out to fade it in 
 
    if (totalRows > maxRows) { // if tr total rows gt max rows option 
 
     var pagenum = Math.ceil(totalRows/maxRows); // ceil total(rows/maxrows) to get .. 
 
     // \t numbers of pages 
 
     for (var i = 1; i <= pagenum;) { // for each page append pagination li 
 
     $('.pagination').append('<li class"wp" data-page="' + i + '">\ 
 
<span>' + i++ + '<span class="sr-only">(current)</span></span>\ 
 
</li>').show(); 
 
     } // end for i 
 
    } // end if row count > max rows 
 
    $('.pagination li:first-child').addClass('active'); // add active class to the first li 
 
    $('.pagination li').on('click', function() { // on click each page 
 
     var pageNum = $(this).attr('data-page'); // get it's number 
 
     var trIndex = 0; // reset tr counter 
 
     $('.pagination li').removeClass('active'); // remove active class from all li 
 
     $(this).addClass('active'); // add active class to the clicked 
 
     $(table + ' tr:gt(0)').each(function() { // each tr in table not the header 
 
     trIndex++; // tr index counter 
 
     // if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out 
 
     if (trIndex > (maxRows * pageNum) || trIndex <= ((maxRows * pageNum) - maxRows)) { 
 
      $(this).hide(); 
 
     } else { 
 
      $(this).show(); 
 
     } //else fade in 
 
     }); // end of for each tr in table 
 
    }); // end of on click pagination list 
 

 

 
    }); 
 

 
    // end of on select change 
 

 

 

 
    // END OF PAGINATION 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="input col-md-1 col-xs-2"> 
 
      <!-- \t \t Show Numbers Of Rows \t \t --> 
 
      <select class="form-control" name="state" id="maxRows"> 
 
       <option value="5000">Show ALL Rows</option> 
 
       <option value="1">1</option> 
 
       <option value="2">2</option> 
 
       <option value="3">3</option> 
 
      </select> 
 
     </div> 
 
    </div> 
 
    <div class="row col-md-12 col-xs-12"> 
 
     <div class="table-responsive"> 
 
      <table class="table table-striped table-hover table-condensed table-bordered" id="Tabla"> 
 
       <thead> 
 
       <tr class="info"> 
 
        <td>ID<span class="hidden-xs"></span></td> 
 
        <td>Family<span class="hidden-xs"></span></td> 
 
       </tr> 
 
       </thead> 
 
       <tbody id="TablaFamilias"> 
 
       <tr> 
 
        <td>1</td> 
 
        <td>A</td> 
 
       </tr> 
 
       <tr> 
 
        <td>2</td> 
 
        <td>B</td> 
 
       </tr> 
 
       <tr> 
 
        <td>3</td> 
 
        <td>A</td> 
 
       </tr> 
 
       <tr> 
 
        <td>4</td> 
 
        <td>D</td> 
 
       </tr> 
 
       <tr> 
 
        <td>5</td> 
 
        <td>A</td> 
 
       </tr> 
 
       </tbody> 
 
       <tfoot></tfoot> 
 
      </table> 
 
      <div> 
 
       <nav> 
 
        <ul class="pagination"></ul> 
 
       </nav> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

Zuerst würde ich vorschlagen, eine Bibliothek für die Tabellenfunktionen wie Sortieren, Filtern, Paging zu verwenden ... wie Sie wirklich das Rad neu zu erfinden sind .

Aber für das Problem, das Sie erhöhen, müssen Sie zwei Einstellungen vornehmen:

1. in Ihrem HTML, markieren Sie die Option mit selected, die Ihre gewünschten Anzahl von Seiten hat bei Laden der Seite angezeigt werden, wie 3 :

   <select class="form-control" name="state" id="maxRows"> 
       <option value="5000">Show ALL Rows</option> 
       <option value="1">1</option> 
       <option value="2">2</option> 
       <option value="3" selected>3</option> 
   </select> 
   

2. In Ihrem Code, rufen Sie die .trigger('change') Methode auf dem maxRows Element:

   $('#maxRows').on('change', function() { 
       // all code here can stay as it is 
       // ... 
   }).trigger('change'); 
   

Das ist es.

Siehe updated fiddle