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">
<thead>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
</thead>
<tbody>
</tbody>
<tfoot>
<td  colspan="4"><ul id="paging" class="pagination">
</ul></td>
</tfoot>
</table>

3. The javascript

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

var xhr = function () {

console.log(arguments);
return $.ajax({
url: 'sample.json', // path to the json file
dataType: 'json' // xml, json, script, or html
});
};

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

case 1:
return item.name;

case 2:
return item.location;

default:
return item.language;
}
};

tab.tabulate({

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

case 'prev':
return 'Peeche';
}
}
})
.on('loadfailure', function (){
console.error(arguments);
alert('Failed!');
});

tab.trigger('load');
</script>

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.