Feature Rich Data Grid Plugin For Bootstrap Website:-
If you need to load lot’s of data with grid view then jQuery Bootgrid is a powerful table extender, It extends your table with nice and helpful features like Table sorting, live filtering, Header/footer pagination etc, This plugin is highly configurable & the plugin is completely based on templates which can be customized as per your need. It also support data attribute all settings can be also set by data attributes. A powerful pagination & search field helps you to navigate through your data easily. See all useful features listed below.
jQuery Bootgrid Features List
- Responsive web design
- Highly configurable
- Accessability support
- Server-side data loading (async)
- Dynamic Manipulation
- Easy Navigation
- Bootstrap support
- Flexible design
- Data API
- Client-side data loading (in-memory)
- Column converters & formatters
- Single & multiple row selection support
- Localization support
Integrate jQuery Bootgrid Plugin on your bootstrap website
You can quickly integrate jQuery Bootgrid on your website just few steps and turn your simple table into a sophisticated data table and offer your users a nice experience and great features without any effort.
Libraries
Load all bootstrap libraries after that include plugins library.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <link href="/dist/jquery.bootgrid.css" rel="stylesheet"> <!--JS --> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="/dist/jquery.bootgrid.js"></script>
HTML
Here is the sample HTML table grid which need to convert feature rich data grid by using jQuery Bootgrid.
<table id="grid-basic" class="table table-condensed table-hover table-striped"> <thead> <tr> <th data-column-id="id" data-type="numeric">ID</th> <th data-column-id="name" data-order="desc">Name</th> <th data-column-id="email" >Email</th> <th data-column-id="phone">Phone</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Rohit</td> <td>hi@iamrohit.in</td> <td>99XXXXXXXX</td> </tr> <tr> <td>1</td> <td>Manish</td> <td>m@iamrohit.in</td> <td>99XXXXXXXX</td> </tr> ... </tbody> </table>
JS
Finally call the plugin and convert normal HTML table into feature rich data grid.
$(function() { $("#grid-basic").bootgrid(); });
Click Here see full documentation to load server data and apply filter directly on server query.
See live demos and download source code.
DEMO | DOWNLOAD
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.