JQuery Pagination
http://stackoverflow.com/q/26008778/1144203
HTML
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<table id="results">
<tr>
<th>ID</th>
<th>Information</th>
<th>Status</th>
<th>Actions</th>
</tr>
</table>
<div id="pageNavPosition"></div>
CSS
table {
border: 1px solid lightgray;
}
th, td{
border:1px solid lightgray;
padding:5px;
}
.pg-normal {
color: black;
font-weight: normal;
text-decoration: none;
cursor: pointer;
}
.pg-selected {
color: black;
font-weight: bold;
text-decoration: underline;
cursor: pointer;
}
JavaScript
// For each item in our JSON, add a table row and cells to the content string
var data = [
{id:1, name:'cell1', information:'First Row'},
{id:2, name:'cell2', information:'Second Row'},
{id:3, name:'cell3', information:'Third Row'},
{id:4, name:'cell4', information:'Fourth Row'},
{id:5, name:'cell5', information:'Fifth Row'},
{id:6, name:'cell6', information:'Sixth Row'},
{id:7, name:'cell7', information:'Seventh Row'},
{id:8, name:'cell8', information:'Eighth Row'},
{id:9, name:'cell9', information:'Nineth Row'},
];
var tableContent = "";
$.each(data, function(){
tableContent += '<tr>';
tableContent += '<td><a href="#" class="linkshowuser" rel="' + this.name + '" title="Show Details">' + this.information + '</a></td>';
tableContent += '<td><button onclick="viewLocationOnMap()">View on map</button></td>';
tableContent += '<td>In Progress</button></td>';
tableContent += '<td><a href="#" class="linkdeleteitem" rel="' + this._id + '">Delete</a></td>';
tableContent += '</tr>';
});
// Inject the whole content string into our existing HTML table
$('#results').append(tableContent);
// Instantiate pagination after data is available
pager = new Pager('results', 3);
pager.init();
pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
// pagination object codes.
function Pager(tableName, itemsPerPage) {
this.tableName = tableName;
this.itemsPerPage = itemsPerPage;
this.currentPage = 1;
this.pages = 0;
this.inited = false;
this.showRecords = function (from, to) {
var rows = document.getElementById(tableName).rows;
// i starts from 1 to skip table header row
for (var i = 1; i < rows.length; i++) {
if (i < from || i > to) rows[i].style.display = 'none';
else rows[i].style.display = '';
}
}
this.showPage = function (pageNumber) {
if (!this.inited) {
alert("not inited");
...