(function($) {
$(function() {
$.widget("zpd.paging", {
options: {
limit: 5,
rowDisplayStyle: 'block',
activePage: 0,
rows: []
},
_create: function() {
var rows = $("tbody", this.element).children();
this.options.rows = rows;
this.options.rowDisplayStyle = rows.css('display');
var nav = this._getNavBar();
this.element.after(nav);
this.showPage(0);
},
_getNavBar: function() {
var rows = this.options.rows;
var nav = $('<div>', {
class: 'paging-nav'
});
for (var i = 0; i < Math.ceil(rows.length / this.options.limit); i++) {
this._on($('<a>', {
href: '#',
text: (i + 1),
"data-page": (i)
}).appendTo(nav), {
click: "pageClickHandler"
});
}
//create previous link
this._on($('<a>', {
href: '#',
text: '<<',
"data-direction": -1
}).prependTo(nav), {
click: "pageStepHandler"
});
//create next link
this._on($('<a>', {
href: '#',
text: '>>',
"data-direction": +1
}).appendTo(nav), {
click: "pageStepHandler"
});
return nav;
},
showPage: function(pageNum) {
var num = pageNum * 1; //it has to be numeric
this.options.activePage = num;
var rows = this.options.rows;
var limit = this.options.limit;
for (var i = 0; i < rows.length; i++) {
if (i >= limit * num && i < limit * (num + 1)) {
$(rows[i]).css('display', this.options.rowDisplayStyle);
} else {
$(rows[i]).css('display', 'none');
}
}
},
pageClickHandler: function(event) {
event.preventDefault();
$(event.target).siblings().attr('class', "");
$(event.target).attr('class', "selected-page");
var pageNum = $(event.target).attr('data-page');
this.showPage(pageNum);
},
pageStepHandler: function(event) {
event.preventDefault();
//get the direction and ensure it's numeric
var dir = $(event.target).attr('data-direction') * 1;
var pageNum = this.options.activePage + dir;
//if we're in limit, trigger the requested pages link
if (pageNum >= 0 && pageNum < this.options.rows.length) {
$("a[data-page=" + pageNum + "]", $(event.target).parent()).click();
}
}
});
});
})(jQuery);
$(document).ready(function() {
$('#tableData').paging({
limit: 3,
activePage: 1
});
$('.paging-nav a[data-page="0"]').addClass('selected-page');
})
.paging-nav {
text-align: left;
padding-top: 2px;
}
.paging-nav a {
margin: auto 1px;
text-decoration: none;
display: inline-block;
padding: 1px 7px;
background: #000;
color: #abdae2;
border-radius: 3px;
}
.paging-nav .selected-page {
background: #abdae2;
font-weight: bold;
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js">
</script>
<table id="tableData" class="table table-bordered table-striped">
<thead>
<tr>
<th>id</th>
<th>first name</th>
<th>surname</th>
<th>number</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Frank</td>
<td>Shoulder</td>
<td>1246</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Jameson</td>
<td>4564</td>
</tr>
<tr>
<td>3</td>
<td>Philip</td>
<td>Jenkins</td>
<td>4456</td>
</tr>
<tr>
<td>4</td>
<td>Maria</td>
<td>Carlston</td>
<td>4456</td>
</tr>
<tr>
<td>5</td>
<td>Julia</td>
<td>Tampelton</td>
<td>1246</td>
</tr>
<tr>
<td>6</td>
<td>Jane</td>
<td>Conor</td>
<td>4456</td>
</tr>
<tr>
<td>7</td>
<td>Susan</td>
<td>Crane</td>
<td>1246</td>
</tr>
<tr>
<td>8</td>
<td>Lucas</td>
<td>Fenric</td>
<td>4456</td>
</tr>
<tr>
<td>8</td>
<td>Mark</td>
<td>Fenric</td>
<td>4456</td>
</tr>
<tr>
<td>9</td>
<td>Hilde</td>
<td>Mayer</td>
<td>4456</td>
</tr>
<tr>
<td>10</td>
<td>John</td>
<td>Tron</td>
<td>1246</td>
</tr>
<tr>
<td>11</td>
<td>Hans</td>
<td>Stark</td>
<td>4564</td>
</tr>
</tbody>
</table>
