Feature Rich Data Grid Plugin For Bootstrap Website

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>

<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>

$(function() { 
  $("#grid-basic").bootgrid();
});