JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://d-scribe.de/webtools/jquery-pagination/lib/jquery_pagination/jquery.pagination.js"></script>
<link rel="stylesheet" href="http://d-scribe.de/webtools/jquery-pagination/lib/jquery_pagination/pagination.css">
<table id="myTable">
<thead>
<tr><th>Customer</th><th>Order</th><th>Month</th></tr>
</thead>
<tbody>
<tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody>
<tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody>
<tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
</tbody>
</table>
<div id="Pagination" class="pagination">
JavaScript
var $tbodies = $("#myTable tbody");
// Create pagination element with options from form
var paginationOpts = {
callback: pageselectCallback,
items_per_page: 1,
num_display_entries: 10,
num_edge_entries: 2,
prev_text: "Prev",
next_text: "Next"
};
function pageselectCallback(page_index, jq) {
//calculate limits of the page in terms of tbody indeces
var limits = {
start: page_index * paginationOpts.items_per_page,
end: (page_index + 1) * paginationOpts.items_per_page
};
$tbodies.filter(":visible").hide();
$tbodies.slice(limits.start, limits.end).show();
// Prevent click eventpropagation
return false;
}
$("#Pagination").pagination($tbodies.length, paginationOpts);