Feature Rich Data Grid Plugin For Bootstrap Website

177

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.

 

Social Media Auto Publish Powered By : XYZScripts.com