Jquery Bootgrid – A full featured Responsive Data Tables plugin for Jquery

Jquery Bootgrid is a slick Responsive Data Tables plugin for jquery to handling large data tables in web pages. It has built-in search options for displayed data. The usage of this jquery plugin is very simple. Just add the javascript, put an id or class to the table then call the jquery function. This data table has a built-in search option, control for how many rows to display, show/hide option for various columns etc.

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

download the minified version of the code or the source code of the project is on github

Boot grid is also available with various package managers like npm or bower

$ npm install jquery–bootgrid

for bower

$ 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:
$("#grid").bootgrid();

Then it is ready for use. That is it.