Simple Data Grid/Table Plugin with jQuery and Bootstrap
File Size: | 6.5 KB |
---|---|
Views Total: | 38063 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.