Jak korzystać z paginacji w tabelach HTML?


Próbuję to wykorzystać

biblioteka
http://flaviusmatis.github.io/simplePagination.js/
paginacja na mojej stronie tabeli HTML (szczególnie lekki motyw), ale z jakiegoś powodu nie mogę dowiedzieć się, jak połączyć tę bibliotekę w ten sposób na mojej stronie HTML, aby kod paginacji działał w mojej tabeli HTML.
W tej chwili mam tabelę HTML bez kodu paginacji, więc mój kod HTML poniżej pokaże tabelę ze wszystkimi wierszami na jednej stronie, której nie potrzebuję ...
Chcę pokazać 6 pozycji w mojej tabeli na jednej stronie, używając powyższej paginacji javascript .. I jak tylko kliknę na drugą zakładkę paginacji, powinna pokazać mi następne sześć pozycji i kontynuować do zakończenia.
Poniżej znajduje się mój pełny kod HTML, w którym próbowałem użyć tej samej paginacji javascript powyżej, ale to nie działa.
<html>
<head><script src="[url=http://code.jquery.com/jquery-1.9.1.min.js"></script>]http://code.jquery.com/jquery- ... gt%3B[/url]
<script src="../jquery.simplePagination.js"></script>
<link href="../simplePagination.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
table {
width: 40em;
margin: 2em auto;
} thead {
background: #000;
color: #fff;
} td {
width: 10em;
padding: 0.3em;
} tbody {
background: #ccc;
} </style> <script>function test(pageNumber)
{ var page="#page-id-"+pageNumber;
$('.select').hide()
$(page).show()}</script></head><body bgcolor="#F8F8F8">
<table class="paginated">
<thead>
<tr>
<th>A</th> <th>B</th> <th>C</th> <th>D</th>
</tr>
</thead> <tbody>
<tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr> <tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
</tbody>
</table><div id="choose"> <script language="javascript">
$(function() {
$('#choose').pagination({
items: 20,
itemsOnPage: 2,
cssStyle: 'light-theme',
onPageClick: function(pageNumber){test(pageNumber)}
});
});
</script> </body>
</html>

Każdy prosty przykład jsfiddle oparty na moim powyższym kodzie HTML, a także w połączeniu z powyższą paginacją javascript pomoże mi lepiej zrozumieć, jak symulować ten plik js w tabelach HTML.
Dzięki za pomoc..

NOTE

:-

Interesuje mnie tylko rozwiązanie simplePagination.js, które obecnie próbuję wdrożyć

Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Wiele razy mogliśmy zrobić paginację za pomocą jquery. Tutaj dam ci odpowiedź i link referencyjny

Jquery

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

JSfiddle: https://jsfiddle.net/u9d1ewsh/
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jest to bardzo proste i wydajne narzędzie wbudowane w jquery do implementacji paginacji w tabeli html

http://tablesorter.com/docs/example-pager.html
http://tablesorter.com/docs/example-pager.html
Pobierz wtyczkę z

http://tablesorter.com/addons/ ... er.js
http://tablesorter.com/addons/ ... er.js
Po dodaniu tej wtyczki dodaj następujący kod do swojego skryptu head
$(document).ready(function() { 
$("table")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
});
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Dla mnie najlepszym i najłatwiejszym sposobem jest Bootply

http://www.bootply.com/lxa0FF9yhw
http://www.bootply.com/lxa0FF9yhw#
#
Najpierw uwzględnij Bootstrap w swoim projekcie
Następnie dołącz plik javascript, w którym piszesz ten kod:
$.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"); }
};

Musisz podać identyfikator tbody swojego stołu i dodać „div” po tabeli w celu paginacji
<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]

Po załadowaniu danych tabeli po prostu wywołaj to
$('#myTableBody').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:4});

gdzie wartość „perPage” wskazuje, ile elementów na stronie chcesz mieć.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

możesz użyć tej funkcji. Został zabrany

https://convertintowordpress.c ... -code
https://convertintowordpress.c ... code/
/
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(); }
});
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Istnieje łatwy sposób na podzielenie tabeli na strony za pomocą

breedjs
http://jjppof.github.io/breedjs
(wtyczka jQuery) patrz przykład:
HTML
<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]

JS
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 + "});"
})
);
}
}
});
});

Za każdym razem, gdy chcesz zmienić stronę, po prostu zadzwoń:
breed.paginate({scope: 'people', page: pageNumber);

Więcej informacji
http://jjppof.github.io/breedjs/#b-paginate
.
Przykład roboczy
https://jsfiddle.net/jjppof/h2epjt6f/
.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:


Czysty JavaScript
... Możesz go zastosować do wielu tabel jednocześnie. Przerywa, jeśli wymagana jest tylko jedna strona. Jako punkt wyjścia użyłem anushri.
Przykro mi, że pytam, ale oczywiście nie jest to proste rozwiązanie w Pagignation.js. Jest to jednak najlepszy wynik w Google po wpisaniu „tabeli stronicowania javascript” i jest to rozsądne rozwiązanie dla wielu osób, które mogą przeglądać bibliotekę, ale nie są pewne, czy wybrać tę trasę, czy nie.
Użyj tego:
addPagerToTables('#someTable', 8);

Nie wymaga żadnego css, chociaż może warto początkowo ukryć wiersze tabeli tBody w css, aby zapobiec efektowi wyświetlania wierszy, a następnie ich szybkiego ukrywania (nie dzieje się to teraz u mnie, ale to jest to, co ja widziałem wcześniej) ...
Kod:
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'; }}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

O ile widzę ze strony internetowej tej wtyczki paginacje, sama wtyczka nie działa

aktualny

paginacja. Jedyne, co robi, to wyświetla serię liczb i wyświetla odpowiednie przyciski w zależności od strony, na której się znajdujesz.
Jednak aby faktycznie podzielić stronę na strony, musisz samodzielnie napisać odpowiedni kod JavaScript. Powinien być umieszczony zamiast tego JavaScript:
function test(pageNumber)
{ var page="#page-id-"+pageNumber;
$('.select').hide()
$(page).show()}

To jest kod, który, jak sądzę, skądś skopiowałeś, ale w tej chwili tak naprawdę nic nie robi. Jeśli nie znasz Javascript, prawdopodobnie chcesz skorzystać z innej biblioteki, która faktycznie obsługuje paginację tabel.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

W nawiązaniu do powyższej odpowiedzi Anusree i pozdrowień, poprawiam nieco kod, aby upewnić się, że działa w większości przypadków.
  • 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ę

Kod:
$(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);
});
}
});
});

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się