Following is an example of Pagination using JSON and Jquery.
I need to paginate the table on my HTML page using Jquery. Following example illustrates how it can be done. The method paginateJSON creates a paginated table:
paginateJSON(empdata, tableId, createTable, createHeader);
Parameters:
- empdata - the JSON object with list ob objects i.e. i our case its Employee records.
- tableId - Table ID attribute
- createTable - Set to true if table has to be created dynamically from JSON object provided i.e. Employee Data.
- createHeader - True if the first object or row in JSON Data contains Header column names.
If Table exists call the following
- paginateJSON(empdata, "empDataTable", false, false);
else
- paginateJSON(empdata, "empDataTable", true, true);
Sample empDataTable to be paginated:
<table id="empDataTable">
<thead>
<tr>
<th>EMPID</th>
<th>NAME</th>
<th>ADDRESS</th>
</tr>
</thead>
<tbody>
<tr style="display: block;">
<td>1</td>
<td>John</td>
<td>1229,Wison Ave, Chicago, IL 60678</td>
</tr>
<tr style="display: block;">
<td>2</td>
<td>Mike</td>
<td>350 5th Ave, New York, NY 10118</td>
</tr>
<tr style="display: block;">
<td>3</td>
<td>Tommy</td>
<td>861 Milwaukee Ave, Chicago IL 60640</td>
</tr>
<tr style="display: block;">
<td>4</td>
<td>Jackson</td>
<td>738 Ashland Ave, Chicago IL 60678</td>
</tr>
<tr style="display: block;">
<td>5</td>
<td>Wilson</td>
<td>566 34th Ave, New York, NY 10118</td>
</tr>
<tr style="display: none;">
<td>6</td>
<td>Eric</td>
<td>1226 Grand St, Chicago IL 60611</td>
</tr>
<tr style="display: none;">
<td>7</td>
<td>Nate</td>
<td>350 5th Ave, New York, NY 10118</td>
</tr>
<tr style="display: none;">
<td>8</td>
<td>Julie</td>
<td>1112 York Rd, Chicago IL 60678</td>
</tr>
<tr style="display: none;">
<td>9</td>
<td>Monica</td>
<td>1514 Wilson St, Chicago IL 60678</td>
</tr>
</tbody>
</table>
<script>
// Sample JSON Object empdata
//For each item in our JSON, add a table row and cells to the content string
var empdata = [ {
empid : 'EMPID',
name : 'NAME',
address : 'ADDRESS'
}, {
empid : 1,
name : 'John',
address : '1229,Wison Ave, Chicago, IL 60678'
}, {
empid : 2,
name : 'Mike',
address : '350 5th Ave, New York, NY 10118'
}, {
empid : 3,
name : 'Tommy',
address : '861 Milwaukee Ave, Chicago IL 60640'
}, {
empid : 4,
name : 'Jackson',
address : '738 Ashland Ave, Chicago IL 60678'
}, {
empid : 5,
name : 'Wilson',
address : '566 34th Ave, New York, NY 10118'
}, {
empid : 6,
name : 'Eric',
address : '1226 Grand St, Chicago IL 60611'
}, {
empid : 7,
name : 'Nate',
address : '350 5th Ave, New York, NY 10118'
}, {
empid : 8,
name : 'Julie',
address : '1112 York Rd, Chicago IL 60678'
}, {
empid : 9,
name : 'Monica',
address : '1514 Wilson St, Chicago IL 60678'
}, ];
- Making a call to paginate method from jquery ready() method.
$(document).ready(function() {
paginateJSON(empdata, "empDataTable", true, true);
});
- required Jquery variables
var pgnavDatatable;
var pgnavTotalItems = 0;
var pgnavItemsPerPage = 5;
var pgnavTotalPages = 0;
var pgnavFrom = 0;
var pgnavTo = 0;
/**
* paginateJSON method creates a table from the JSON object passed.
*
* pdata - JSON object containing data to be dynamically added to table.
* id - id attribute of the table.
* createTable - (true/false): If true creates table else assumes table exists in page.
* createHeader - (true/false): If true, creates head row for the table using first row to get header names.
*
*
*/
function paginateJSON(pdata, tableid, createTable, createHeader) {
pgnavTotalItems = pdata.length;
pgnavTotalPages = Math.ceil(pgnavTotalItems / pgnavItemsPerPage);
//drawTable(pdata, tableid, createTable, createHeader);
pgnavDatatable = $("#" + tableid);
/**
* Create a Div for pagination controls.
* Div contains two hidden fields i.e. currentPage and itemsPerPage.
*/
$('body')
.append(
'<div class=controls></div><input id=current_page type=hidden><input id=itemsPerPage type=hidden>');
$('#current_page').val(0);
$('#itemsPerPage').val(pgnavItemsPerPage);
var pgnavBlock = '<a class="prev" onclick="navPrevious()">Prev</a>';
var current_link = 0;
while (pgnavTotalPages > current_link) {
pgnavBlock += '<a class="page" onclick="navigateTo(' + current_link
+ ')" longdesc="' + current_link + '">'
+ (current_link + 1) + '</a>';
current_link++;
}
pgnavBlock += '<a class="next" onclick="navNext()">Next</a>';
$('.controls').html(pgnavBlock);
$('.controls .page:first').addClass('active');
pgnavDatatable.children('tbody').children().css('display', 'none');
pgnavDatatable.children('tbody').children().slice(0, pgnavItemsPerPage)
.css('display', '');
}
function navigateTo(pageNumber) {
var itemsPerPage = parseInt($('#pgnavItemsPerPage').val(), 0);
start_from = pageNumber * pgnavItemsPerPage;
end_on = start_from + pgnavItemsPerPage;
pgnavDatatable.children('tbody').children().css('display', 'none')
.slice(start_from, end_on).css('display', '');
$('.page[longdesc=' + pageNumber + ']').addClass('active').siblings(
'.active').removeClass('active');
$('#current_page').val(pageNumber);
}
function navPrevious() {
new_page = parseInt($('#current_page').val(), 0) - 1;
//if there is an item before the current active link run the function
if ($('.active').prev('.page').length == true) {
navigateTo(new_page);
}
}
function navNext() {
new_page = parseInt($('#current_page').val(), 0) + 1;
//if there is an item after the current active link run the function
if ($('.active').next('.page').length == true) {
navigateTo(new_page);
}
}
function drawTable(data, tableid, createTable, createHeader) {
if (data == null || data == 'undefined') {
return;
}
if (createTable) {
pgnavDatatable = $("<table id='" + tableid + "'></table>");
} else {
pgnavDatatable = $("#" + tableid);
}
var tablehead = $("<thead />");
var tablebody = $("<tbody />");
for (var i = 0; i < data.length; i++) {
var datarow = $("<tr />");
if (createHeader && i == 0) {
datarow.append($("<th>" + data[i].empid + "</th>"));
datarow.append($("<th>" + data[i].name + "</th>"));
datarow.append($("<th>" + data[i].address + "</th>"));
tablehead.append(datarow);
} else {
datarow.append($("<td>" + data[i].empid + "</td>"));
datarow.append($("<td>" + data[i].name + "</td>"));
datarow.append($("<td>" + data[i].address + "</td>"));
tablebody.append(datarow);
}
}
pgnavDatatable.append(tablehead);
pgnavDatatable.append(tablebody);
if (createTable) {
$('body').append(pgnavDatatable);
}
}
</script>
The above code can be tested at following jsfiddle link. Suggestions are welcome.
Pagination Example using Jquery and JSON