<!DOCTYPE html>
<html>
<head>
<title>Example of TablePagination</title>
<style type="text/css">
table{
border: 1px solid black;
border-collapse: collapse;
color: #202020;
width: 37%;
}
table td{
padding: 5px;
border: 3px solid orange;
font-weight:bold;
}
.TablePagination_next,.TablePagination_previous{
color: orange;
cursor: pointer;
padding: 1.5px;
background-color: #eee;
}
.TablePagination_currentPage{
color: #c00;
font-weight:bold;
}
</style>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="tablePagination.class.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
var paginate = new TablePagination();
//......element(s), rows/page, starting page
paginate.init('#dataTable', 10, 1);
});
function TablePagination() {
var $table;
var currentPage = 1;
this.init = function(ptr, count, startPage, createButtons) {
var obj = this;
if (typeof ptr == "string") {
$table = $(ptr);
} else if (typeof ptr == "object") {
$table = ptr;
}
if (startPage != undefined && parseInt(startPage) > 0) {
currentPage = startPage;
}
if (createButtons !== false) {
$table.after('' +
'<p id="pagination"><span class="TablePagination_previous">previous</span>' +
' | page <span class="TablePagination_currentPage">' + currentPage + '</span> | ' +
'<span class="TablePagination_next">next</span>' +
'<br>Page <span class="TablePagination_currentPage">' + currentPage + '</span>' + ' of ' + count + '</p>');
}
$('.TablePagination_previous').click(function() {
if (currentPage > 1) {
currentPage--;
obj.show(currentPage);
$('.TablePagination_currentPage').text(currentPage);
}
return false;
});
$('.TablePagination_next').click(function() {
if (currentPage < $table.find('tr').length / count) {
currentPage++;
obj.show(currentPage);
$('.TablePagination_currentPage').text(currentPage);
}
return false;
});
obj.makePages(count);
obj.show(currentPage);
};
this.makePages = function(count) {
var i = 0;
$table.find('tr').each(function() {
if ($(this).index() % count == 0) {
i++;
}
$(this).addClass('TablePagination_page' + i);
});
};
this.show = function(page) {
$table.find('tr').hide();
$('.TablePagination_page' + page).show();
};
}
});
</script>
</head>
<body>
<h2>Example of Base Functionality using TablePagination</h2>
...............
...............
.................
Stefan Drugda - 2015-10-27 12:29:27
