This plugin is licensed using MIT license. and the code is available in Github Repo.
Boot grid also supports to load data from ajax calls.
Features of Responsive Data Tables plugin – Bootgrid
The features of Responsive Data Tables plugin is given below. Bootgrid perform very well with jquery and bootstrap framework.
- Responsive web design – Fully compatible with Mobile interface, horizontal scrolling of table is supported. Adaptive UI on mobile devices
- Accessibility support – Accessibility module will be nice to special people. Just connect with everyone without extra effort
- Server-side data loading (async) – Load data using Ajax requests from server. Fully supported REST service interface.
- Dynamic Manipulation of Data – Add, Edit, Delete data or rows on the go without any problem. Full fledged API is available.
- Easy Navigation – A powerful pagination & search field helps to navigate through loaded data easily.
- Bootstrap support – The default styling is based on Bootstrap css and the table look native on a bootstrap website. It is very easy to theme for other frameworks also.
- Flexible design – Very convenient to theme the table for any framework. If the css is a custom one then also it will adapt the style very fast.
- Highly configurable – Everything is configurable & the plugin is completely based on templates which can be customized.
- Data API – All settings can be also set by data attributes.
- Client-side data loading – Turn your basic table into a table with advanced functionality (e.g. sorting, paging, searching and much more).
- Column converters & format managers For more flexibility.
- Single & multiple row selection support
- Localization support – Labels can be easily changed based on the strings in a po file.
Download Jquery Bootgrid – Responsive Data Tables plugin
Boot grid is also available with various package managers like npm or bower
$ npm install jquery–bootgrid
$ bower install jquery.bootgrid
Detailed Examples of how to use jquery bootgrid is available on the original website with various options.
1. Insert the necessary jQuery library and Bootstrap framework into the web page.
<link rel="stylesheet" href="/path/to/bootstrap.min.css"> <script src="/path/to/jquery.min.js"></script> <script src="/path/to/bootstrap.min.js"></script>
2. Download and insert the jQuery Bootgrid’s files into the page.
<link href="/dist/jquery.bootgrid.css" rel="stylesheet"> <script src="/dist/jquery.bootgrid.js"></script>
3. Just add the data-toggle=”bootgrid” attribute to your html table and the plugin will take care of the rest.
<table id="grid" class="table table-condensed table-hover table-striped" data-toggle="bootgrid"> <thead> <tr> <th data-column-id="id" data-identifier="true" data-type="numeric">ID</th> <th data-column-id="sender" data-order="asc">Name</th> .. </tr> </thead> <tbody> <tr> <td>1</td> <td>Alpha Fork</td> </tr> .. </tbody> </table>
4. To initialize the data grid manually:
Then it is ready for use. That is it.