Table Pagination
HTML
<table cellpadding="1" cellspacing="1">
<tr>
<th>Name</th>
<th>Date</th>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Hunter Vinson</td>
<td>08.19.14</td>
<td>Cursus Diam At Consulting</td>
<td>Sierra Leone</td>
</tr>
<tr>
<td>Josiah Branch</td>
<td>06.09.14</td>
<td>Non Egestas Industries</td>
<td>Cyprus</td>
</tr>
<tr>
<td>Nathan Bryant</td>
<td>12.20.14</td>
<td>Luctus Corporation</td>
<td>Martinique</td>
</tr>
<tr>
<td>Axel Juarez</td>
<td>04.26.14</td>
<td>Massa Company</td>
<td>Estonia</td>
</tr>
<tr>
<td>Jaden Sharpe</td>
<td>10.26.14</td>
<td>Penatibus Et LLC</td>
<td>Heard Island and Mcdonald Islands</td>
</tr>
<tr>
<td>Macey Benjamin</td>
<td>09.25.13</td>
<td>Pharetra Quisque Ltd</td>
<td>Norfolk Island</td>
</tr>
<tr>
<td>Jordan Clements</td>
<td>05.26.13</td>
<td>Consequat Lectus Industries</td>
<td>Bulgaria</td>
</tr>
<tr>
<td>Inga Mckay</td>
<td>11.20.13</td>
<td>Ligula Consectetuer Industries</td>
<td>China</td>
</tr>
<tr>
<td>Levi Baxter</td>
<td>12.12.13</td>
<td>Malesuada Associates</td>
<td>Colombia</td>
</tr>
<tr>
<td>MacKenzie Kelly</td>
<td>12.04.14</td>
<td>Mi Associates</td>
<td>Tonga</td>
</tr>
<tr>
<td>Solomon Mann</td>
<td>12.24.13</td>
<td>Fusce Mollis Associates</td>
<td>Saint Martin</td>
</tr>
<tr>
<td>Pascale Kinney</td>
<td>09.15.13</td>
<td>Integer Vitae LLP</td>
<td>Christmas Island</td>
</tr>
<tr>
<td>Shelly Salazar</td>
<td>08.02.14</td>
<td>Pellentesque Ultricies Dignissim...
CSS
body {
overflow-y: scroll;
}
table td {
padding: 0 0.5em
}
.tablePagination {
padding-left: 0;
margin-top: 1em;
}
.tablePagination:before {
content:"Seiten: ";
}
.tablePagination li {
cursor: pointer;
display: inline-block;
list-style: none;
padding: 2px 9px;
}
.tablePagination li:hover {
background: #eee;
}
.tablePagination .current {
background: #26b;
color: #fff;
}
JavaScript
function loadJS(src, cb) {
"use strict";
var ref = window.document.getElementsByTagName("script")[0];
var script = window.document.createElement("script");
script.src = src;
script.async = true;
ref.parentNode.insertBefore(script, ref);
if (cb && typeof (cb) === "function") {
script.onload = cb;
}
return script;
}
// https://github.com/sinky/jquery.tablePagination.js/
loadJS('https://rawgit.com/sinky/jquery.tablePagination.js/master/jquery.tablePagination.js', function () {
$('table').tablePagination({
perPage: 15,
initPage: 3,
position: 'top'
});
});