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ć
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
8 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
Jquery
JSfiddle: https://jsfiddle.net/u9d1ewsh/
Anonimowy użytkownik
Potwierdzenie od:
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
Anonimowy użytkownik
Potwierdzenie od:
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:
Musisz podać identyfikator tbody swojego stołu i dodać „div” po tabeli w celu paginacji
Po załadowaniu danych tabeli po prostu wywołaj to
gdzie wartość „perPage” wskazuje, ile elementów na stronie chcesz mieć.
Anonimowy użytkownik
Potwierdzenie od:
https://convertintowordpress.c ... -code
https://convertintowordpress.c ... code/
/
Anonimowy użytkownik
Potwierdzenie od:
breedjs
http://jjppof.github.io/breedjs
(wtyczka jQuery) patrz przykład:
HTML
JS
Za każdym razem, gdy chcesz zmienić stronę, po prostu zadzwoń:
Więcej informacji
http://jjppof.github.io/breedjs/#b-paginate
.
Przykład roboczy
https://jsfiddle.net/jjppof/h2epjt6f/
.
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:
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:
Anonimowy użytkownik
Potwierdzenie od:
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:
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
Potwierdzenie od:
Kod: