Jak korzystać z paginacji w tabelach HTML?

$(document).ready(function(){

 $('#data').after('<div id="nav">');

 var rowsShown = 4;

 var rowsTotal = $('#data tbody tr').length;

 var numPages = rowsTotal/rowsShown;

 for(i = 0;i < numPages;i++) {

 var pageNum = i + 1;

 $('#nav').append('[url="#" rel="'+i+'">'+pageNum+'[/url] ');

 }

 $('#data tbody tr').hide();

 $('#data tbody tr').slice(0, rowsShown).show();

 $('#nav a:first').addClass('active');

 $('#nav a').bind('click', function(){ $('#nav a').removeClass('active');

 $(this).addClass('active');

 var currPage = $(this).attr('rel');

 var startItem = currPage * rowsShown;

 var endItem = startItem + rowsShown;

 $('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).

 css('display','table-row').animate({opacity:1}, 300);

 });

 });

$(document).ready(function() { 

 $("table") 

 .tablesorter({widthFixed: true, widgets: ['zebra']}) 

 .tablesorterPager({container: $("#pager")}); 

});

$.fn.pageMe = function(opts){

 var $this = this,

 defaults = {

 perPage: 7,

 showPrevNext: false,

 hidePageNumbers: false

 },

 settings = $.extend(defaults, opts); var listElement = $this;

 var perPage = settings.perPage; 

 var children = listElement.children();

 var pager = $('.pager'); if (typeof settings.childSelector!="undefined") {

 children = listElement.find(settings.childSelector);

 } if (typeof settings.pagerSelector!="undefined") {

 pager = $(settings.pagerSelector);

 } var numItems = children.size();

 var numPages = Math.ceil(numItems/perPage); pager.data("curr",0); if (settings.showPrevNext){

 $('[*][url="#" class="prev_link">«[/url][/*]').appendTo(pager);

 } var curr = 0;

 while(numPages > curr && (settings.hidePageNumbers==false)){

 $('[*][url="#" class="page_link">'+(curr+1)+'[/url][/*]').appendTo(pager);

 curr++;

 } if (settings.showPrevNext){

 $('[*][url="#" class="next_link">»[/url][/*]').appendTo(pager);

 } pager.find('.page_link:first').addClass('active');

 pager.find('.prev_link').hide();

 if (numPages<=1) {

 pager.find('.next_link').hide();

 }

 pager.children().eq(1).addClass("active"); children.hide();

 children.slice(0, perPage).show(); pager.find('li .page_link').click(function(){

 var clickedPage = $(this).html().valueOf()-1;

 goTo(clickedPage,perPage);

 return false;

 });

 pager.find('li .prev_link').click(function(){

 previous();

 return false;

 });

 pager.find('li .next_link').click(function(){

 next();

 return false;

 }); function previous(){

 var goToPage = parseInt(pager.data("curr")) - 1;

 goTo(goToPage);

 } function next(){

 goToPage = parseInt(pager.data("curr")) + 1;

 goTo(goToPage);

 } function goTo(page){

 var startAt = page * perPage,

 endOn = startAt + perPage; children.css('display','none').slice(startAt, endOn).show(); if (page>=1) {

 pager.find('.prev_link').show();

 }

 else {

 pager.find('.prev_link').hide();

 } if (page<(numPages-1)) {

 pager.find('.next_link').show();

 }

 else {

 pager.find('.next_link').hide();

 } pager.data("curr",page);

 pager.children().removeClass("active");

 pager.children().eq(page+1).addClass("active"); }

};

<table class="table" id="myTable">

 <thead>

 <tr>

 <th>...</th>

 </tr>

 </thead>

 <tbody id="myTableBody">

 </tbody>

 </table>

 <div class="col-md-12 text-center">

 <ul class="pagination pagination-lg pager" id="myPager">[/list]

 

$('#myTableBody').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:4});

function pagination(){

 var req_num_row=10;

 var $tr=jQuery('tbody tr');

 var total_num_row=$tr.length;

 var num_pages=0;

 if(total_num_row % req_num_row ==0){

 num_pages=total_num_row/req_num_row;

 }

 if(total_num_row % req_num_row >=1){

 num_pages=total_num_row/req_num_row;

 num_pages++;

 num_pages=Math.floor(num_pages++);

 }

 for(var i=1; i<=num_pages; i++){

 jQuery('#pagination').append("[url='#' class='btn'>"+i+"[/url]");

 }

 $tr.each(function(i){

 jQuery(this).hide();

 if(i+1 <= req_num_row){

 $tr.eq(i).show();

 } });

 jQuery('#pagination a').click(function(e){

 e.preventDefault();

 $tr.hide();

 var page=jQuery(this).text();

 var temp=page-1;

 var start=temp*req_num_row;

//alert(start); for(var i=0; i< req_num_row; i++){ $tr.eq(start+i).show(); }

 });

}

<table>

 <thead>

 <tr>

 <th>Name</th>

 <th>Gender</th>

 <th>Age</th>

 <th>Email</th>

 </tr>

 </thead>

 <tbody>

 <tr b-scope="people" b-loop="person in people" b-paginate="5">

 <td>{{person.name}}</td>

 <td>{{person.gender}}</td>

 <td>{{person.age}}</td>

 <td>{{person.email}}</td>

 </tr>

 </tbody>

</table>

[list][/list]

var data={ people: [ {...}, {...}, ...] };$(function() {

 breed.run({

 scope: 'people',

 input: data,

 runEnd: function(){//This runEnd is just to mount the page buttons

 for(i=1 ; i<=breed.getPageCount('people') ; i++){

 $('ul').append( $('[*]',{

 html: i,

 onclick: "breed.paginate({scope: 'people', page: " + i + "});"

 })

 );

 }

 }

 });

});

breed.paginate({scope: 'people', page: pageNumber);

addPagerToTables('#someTable', 8);

function addPagerToTables(tables, rowsPerPage = 10) { tables = 

 typeof tables == "string"

 ? document.querySelectorAll(tables)

 : tables; for (let table of tables) 

 addPagerToTable(table, rowsPerPage);}function addPagerToTable(table, rowsPerPage = 10) { let tBodyRows = table.querySelectorAll('tBody tr');

 let numPages = Math.ceil(tBodyRows.length/rowsPerPage); let colCount = 

 [].slice.call( table.querySelector('tr').cells

 )

 .reduce((a,b) => a + parseInt(b.colSpan), 0); table

 .createTFoot()

 .insertRow()

 .innerHTML = `<td colspan=${colCount}><div class="nav"></td>`; if(numPages == 1)

 return; for(i = 0;i < numPages;i++) { let pageNum = i + 1; table.querySelector('.nav')

 .insertAdjacentHTML( 'beforeend',

 `[url="#" rel="${i}">${pageNum}[/url] ` 

 ); } changeToPage(table, 1, rowsPerPage); for (let navA of table.querySelectorAll('.nav a'))

 navA.addEventListener( 'click', 

 e => changeToPage( table, 

 parseInt(e.target.innerHTML), 

 rowsPerPage

 )

 );}function changeToPage(table, page, rowsPerPage) { let startItem = (page - 1) * rowsPerPage;

 let endItem = startItem + rowsPerPage;

 let navAs = table.querySelectorAll('.nav a');

 let tBodyRows = table.querySelectorAll('tBody tr'); for (let nix = 0; nix < navAs.length; nix++) { if (nix == page - 1)

 navAs[nix].classList.add('active');

 else 

 navAs[nix].classList.remove('active'); for (let trix = 0; trix < tBodyRows.length; trix++) 

 tBodyRows[trix].style.display = 

 (trix >= startItem && trix < endItem)

 ? 'table-row'

 : 'none';  }}

function test(pageNumber)

{ var page="#page-id-"+pageNumber;

 $('.select').hide()

 $(page).show()}

• Utworzono funkcję wielokrotnego użytku paginate („#myTableId”), którą można wywołać dowolną liczbę razy dla dowolnej tabeli.
• Dodanie kodu wewnątrz funkcji ajaxComplete, aby upewnić się, że zamiana jest wywoływana po pełnym załadowaniu tabeli przy użyciu jquery. Używamy stronicowania głównie dla tabel opartych na Ajax.
• Usuń element div pagination i powiąż przy każdym wywołaniu paginacji
• Ustawianie liczby wierszy na stronę

$(document).ready(function () {

 $(document).ajaxComplete(function () {

 paginate('#myTableId',10);

 function paginate(tableName,RecordsPerPage) {

 $('#nav').remove();

 $(tableName).after('<div id="nav">');

 var rowsShown = RecordsPerPage;

 var rowsTotal = $(tableName + ' tbody tr').length;

 var numPages = rowsTotal/rowsShown;

 for (i = 0; i < numPages; i++) {

 var pageNum = i + 1;

 $('#nav').append('[url="#" rel="' + i + '">' + pageNum + '[/url] ');

 }

 $(tableName + ' tbody tr').hide();

 $(tableName + ' tbody tr').slice(0, rowsShown).show();

 $('#nav a:first').addClass('active');

 $('#nav a').bind('click', function () { $('#nav a').removeClass('active');

 $(this).addClass('active');

 var currPage = $(this).attr('rel');

 var startItem = currPage * rowsShown;

 var endItem = startItem + rowsShown;

 $(tableName + ' tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).

 css('display', 'table-row').animate({ opacity: 1 }, 300);

 });

 }

 });

});