// For each item in our JSON, add a table row and cells to the content string
var total_records = 19;
var data = [{
id: 1,
name: 'cell1',
information: 'First Row'
}, {
id: 2,
name: 'cell2',
information: 'Second Row'
}, {
id: 1,
name: 'cell1',
information: 'First Row'
}, {
id: 2,
name: 'cell2',
information: 'Second Row'
}, {
id: 1,
name: 'cell1',
information: 'First Row'
}, {
id: 2,
name: 'cell2',
information: 'Second Row'
}, {
id: 1,
name: 'cell1',
information: 'First Row'
}, {
id: 2,
name: 'cell2',
information: 'Second Row'
}, {
id: 2,
name: 'cell2',
information: 'Second Row'
}, {
id: 1,
name: 'cell1',
information: 'First Row'
}, {
id: 2,
name: 'cell2',
information: 'Second Row'
}, {
id: 2,
name: 'cell2',
information: 'Second Row'
}, {
id: 1,
name: 'cell1',
information: 'First Row'
}, {
id: 2,
name: 'cell2',
information: 'Second Row'
}, {
id: 1,
name: 'cell1',
information: 'First Row'
}, {
id: 2,
name: 'cell2',
information: 'Second Row'
}, {
id: 1,
name: 'cell1',
information: 'First Row'
}, {
id: 2,
name: 'cell2',
information: 'Second Row'
}, {
id: 2,
name: 'cell2',
information: 'Second 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('results').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");
return;
}
var oldPageAnchor = document.getElementById('pg' + this.currentPage);
oldPageAnchor.className = 'pg-normal';
this.currentPage = pageNumber;
var newPageAnchor = document.getElementById('pg' + this.currentPage);
newPageAnchor.className = 'pg-selected';
var from = (pageNumber - 1) * itemsPerPage + 1;
var to = from + itemsPerPage - 1;
this.showRecords(from, to);
}
this.prev = function() {
if (this.currentPage > 1) this.showPage(this.currentPage - 1);
}
this.next = function() {
if (this.currentPage < this.pages) {
this.showPage(this.currentPage + 1);
}
}
this.init = function() {
var rows = total_records;
var records = (rows - 1);
this.pages = Math.ceil(records/itemsPerPage);
this.inited = true;
}
this.showPageNav = function(pagerName, positionId) {
if (!this.inited) {
alert("not inited");
return;
}
var element = document.getElementById(positionId);
var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> ';
for (var page = 1; page <= this.pages; page++)
pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> ';
pagerHtml += '<span onclick="' + pagerName + '.next();" class="pg-normal"> Next »</span>';
element.innerHTML = pagerHtml;
}
}
table {
border: 1px solid lightgray;
}
th {
border: 1px solid #2196F3;
padding: 5px;
background: #03A9F4;
color: #fff;
}
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;
}
div#pageNavPosition {
display: inline-block;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
margin-top: 10px;
}
div#pageNavPosition span {
padding: 5px 9px;
background: #E0E0E0;
margin: 1px;
display: inline-block;
color: #eee;
border-radius: 5px;
text-transform: capitalize;
}
div#pageNavPosition span.pg-normal {
color: #404040;
font-weight: normal;
text-decoration: none;
cursor: pointer;
}
div#pageNavPosition span.pg-normal:hover {
color: white;
background: #9E9E9E;
text-decoration: underline;
cursor: pointer;
}
div#pageNavPosition span.pg-selected {
color: white;
font-weight: normal;
cursor: pointer;
background: #1C78C1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" <!-- Latest compiled and minified CSS -->
< link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity = "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin = "anonymous" >
<!-- Optional theme -->
< link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity = "sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
crossorigin = "anonymous" >
<!-- Latest compiled and minified JavaScript -->
< script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity = "sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin = "anonymous" >
</script>
<table id="results">
<tr>
<th>ID</th>
<th>Information</th>
<th>Status</th>
<th>Actions</th>
</tr>
</table>
<div id="pageNavPosition"></div>
爲什麼這個標記爲'jquery'？ – Alex