jQuery Paginated Data Table Plugin with Bootstrap - Tabulate

File Size: 12.5KB
Views Total: 76457
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Paginated Data Table Plugin with Bootstrap - Tabulate

jQuery Tabulate is a jQuery plugin for creating an ajax-enabled data table from a JSON data file and paginating it using javascript and Twitter's bootstrap 3.

Basic Usage:

1. Include jQuery javascript library and jQuery tabulate plugin in the head section of your page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.tabulate.js"></script>

2. Create a data table

<table id="tab" class="table table-striped">
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
<td  colspan="4"><ul id="paging" class="pagination">

3. The javascript

<script type="text/javascript">
var tab = $('#tab')

var xhr = function () {

return $.ajax({
url: 'sample.json', // path to the json file
dataType: 'json' // xml, json, script, or html

var renderer = function (r, c, item) {
case 0:
return item.sr;

case 1:
return item.name;

case 2:
return item.location;

return item.language;


source: xhr,
renderer: renderer,
pagination: $('#paging'),
pagesI18n: function(str) {
switch(str) {
case 'next':
return 'Aage';

case 'prev':
return 'Peeche';
.on('loadfailure', function (){


4. JSON File Format

"items": [
"Title 1" : 1,
"Title 2": "Amey Sakhadeo",
"Title 3": "Pune",
"Title 4": "Javascript"
"Title 1" : 2,
"Title 2": "Paul Irish",
"Title 3": "Mountain View",
"Title 4": "CSS"
"totalPages": 40,
"currPage": 4

This awesome jQuery plugin is developed by ameyms. For more Advanced Usages, please check the demo page or visit the official website.