Feature Rich Data Grid Plugin For Bootstrap Website

by Posted on

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.
Data-Grid-Plugin-For-Bootstrap



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.



Published by admin