A nice and intuitive Bootstrap grid control – jQuery bootgrid

Tables in web project? Try jQuery bootgrid – a lightweight Bootstrap grid control, implemented as jQuery plugin.

Bootstrap grid control in action

Nice and intuitive. A grid control especially designed for bootstrap. This UI component written for jQuery and Bootstrap (Bootstrap isn’t necessarily required), has rich, interesting features.

jQuery Bootgrid is a powerful table extender. It extends your table with nice and helpful features, like:

– Responsive web design and accessability support

– Server-side data loading (async) – load data via AJAX

– Dynamic Manipulation

– Easy Navigation and flexible design

– Highly configurable

– Data API

– Single & multiple row selection support

– Localization support

… and more! It’s lightweight and Cross Browser.

Bootgrid - jQuery and Bootstrap grid control
Bootgrid – jQuery and Bootstrap grid control

Usage

Include jQuery, jQuery Bootgrid and Bootstrap libraries:

<link href="bootstrap.css" rel="stylesheet">
<link href="jquery.bootgrid.css" rel="stylesheet">
<script src="jquery.js"></script> 
<script src="jquery.bootgrid.js"></script>

Then define the table layout and your data columns by adding the data-column-id attribute. Specify data URL used to fill the table via AJAX:

<table id="grid" data-toggle="bootgrid" data-ajax="true" 
  data-url="/api/data/basic" 
  class="table table-condensed table-hover table-striped">
  <thead>
    <tr>
      <th data-column-id="id">ID</th>
      <th data-column-id="name">Sender</th>
    </tr>
  </thead>
</table>

That’s it. Many interesting examples and documentation you can find at project website.

License: MIT

Demos & docs:

http://www.jquery-bootgrid.com/Examples

GitHub:

https://github.com/rstaib/jquery-bootgrid

See also:

JavaScript Excel tables library

A nice, editable jQuery table plugin with Bootstrap

jQuery table filter with multiple criteria – multifilter

Enjoy!

Share:Share on Facebook0Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest2