Simple Data Grid/Table Plugin with jQuery and Bootstrap

A simple jQuery plugin to creates a nice looking data grid/table from an ajax data source (JSON Data), built upon of jQuery, jQuery UI and Bootstrap3.

Features:

• Fully responsive for mobile and desktop.
• Sortable column headers.
• Paging and item counts.
• Auto load.
• Filterable columns.
• Super simple and easy to use.

Basic Usage:

1. Include the jQuery javascript library and other required resources in the page.

<!-- css -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- javascript --> 
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

2. Include the jQuery grid plugin after jQuery library.

<script src="grid.js"></script> 

3. Create an empty table in the page.

<table id="basic" class="table">
</table>

4. Call the plugin on the table, set the data source and other options for the data grid/table.

<script>
$(document).ready(function() {
$('#basic').grid({
    url: 'basic.json',
    autoLoad: true,
    paging: false,
    dataTypeName: 'user',
    dataTypePluralName: 'users',
    columns: [{
    label: 'First Name',
    type: 'text',
    index: 'firstName'
    }, {
    label: 'Last Name',
    type: 'text',
    index: 'lastName'
    }, {
    label: 'Email',
    type: 'email',
    index: 'emailAddress'
    }]
    });
});
</script>

4. The data structure of your JSON file should be like this.

{
"total": 2,
"data" : [{
"firstName" : "Billy",
"lastName" : "Bob",
"emailAddress" : "[email protected]"
}, {
"firstName" : "Sally",
"lastName" : "Sue",
"emailAddress" : "[email protected]"
},
...
]
}

5. All the default settings.

columns: [],
method: 'GET',
parameters: { offset: 0, limit: 25},
autoLoad: false,
paging: false,
dataProperty: 'data',
totalProperty: 'total',
summaryProperty: 'summary',
dataTypeName: 'item',
dataTypePluralName: 'items',
currencyCode: 'USD',
summaryClass: 'summary',
noDataClass: 'noData',
classPrefix: 'grid'

---

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