Bootstrap DataTable Gridview

Bootstrap

Bootstrap is a powerful mobile-first front-end framework. It is very helpful in faster and easier web development by using HTML, CSS, and JavaScript.
Bootstrap is open source and there are many Bootstrap sample applications already submitted on GitHub.

Browser Support

Most of the browsers support Bootstrap framework.

Advantages of Bootstrap

Easy to get started
Responsive design
Cross-browser support
Easy to customize
Encourages using LESS
Supports useful jQuery plugins
Many custom jQuery plugins available
Mobile-first

Bootstrap Packages

Bootstrap has a responsive mobile-first Grid that allows us to develop our own design too.
Bootstrap has some extremely useful jQuery plugins to show Modal, DropDown,Tooltip, and Carousel.

Download Bootstrap

We can download the latest version of Bootdtrap from http://getbootstrap.com.

GridView Design by using DataTable

Add the below code to Head tag.

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Data Tables</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link href="bootstrap/css/dataTables.bootstrap.css" rel="stylesheet" />
<link href="bootstrap/css/AdminLTE.min.css" rel="stylesheet" />
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link href="bootstrap/css/_all-skins.min.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="bootstrap/js/jquery-2.2.3.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/jquery.dataTables.min.js"></script>
<script src="bootstrap/js/dataTables.bootstrap.js"></script>
<script src="bootstrap/js/app.min.js"></script>
<script>
$(function () {
$("#example1").DataTable({
"pageLength": 3
});
$('#example2').DataTable({
"pageLength": 3,
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false
});
});
</script>
<![endif]-->
<style>
.content-wrapper, .right-side, .main-footer {
margin-left: 0px;
}
</style>

KeyPoints

bootstrap.css,font-awesome.min.css and other CSS files are used for responsive design and custom design.
html5shiv.js ,respond.min.js are the two JavaScript files used to make our website support IE8.
jquery-1.9.1.js is used for validation purpose.
jquery.dataTables.min.js,dataTables.bootstrap.js,app.min.js files are used to make responsive Grid.

Add the below code to Body tag.

<div class="box">
<div class="box-header">
<h3 class="box-title">Hover Data Table</h3>
</div>
<div class="box-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td>3.5</td>
<td>A</td>
</tr>
<tr>
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td>1</td>
<td>C</td>
</tr>
<tr>
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td>1</td>
<td>C</td>
</tr>
<tr>
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td>-</td>
<td>C</td>
</tr>
<tr>
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td>-</td>
<td>C</td>
</tr>
<tr>
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td>-</td>
<td>C</td>
</tr>
<tr>
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td>-</td>
<td>U</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
</div>

The Output is shown below.

Sample 2

<div class="box">
<div class="box-header">
<h3 class="box-title">Data Table With Full Features</h3>
</div>
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td>1</td>
<td>C</td>
</tr>
<tr>
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td>-</td>
<td>C</td>
</tr>
<tr>
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td>-</td>
<td>C</td>
</tr>
<tr>
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td>-</td>
<td>C</td>
</tr>
<tr>
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td>-</td>
<td>U</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
</div>

Output

We can enable sorting, searching, and pagination by using small script.

pageLength property is used to set Length per page.
paging property is used to enable pagination.
searching property is used to enable searching option.
ordering property is used to enable ordering our GridView data.
info property is used to enable GridView information (showing 1 to 3 of 9 entries).
autoWidth property is used to set the width to adjust automatically with Grid.

<script>
$(function () {
$("#example1").DataTable({
"pageLength": 3
});
$('#example2').DataTable({
"pageLength": 3,
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false
});
});
</script>

5 Comments

Join the conversation! Your thoughts help the community grow.

sujay modak3y ago
In this article runat='Server' tag is missing in table id="example1"
Ananth G9y ago
Https://stackoverflow.com/questions/8200681/apply-jquery-datatables-plugin-to-asp-gridview
Ananth G9y ago
You load data to asp.net grid then you mention that grid id in below jquery <script> $(function () { $("#GridID").DataTable({ "pageLength": 3 }); $('#GridID').DataTable({ "pageLength": 3, "paging": true, "lengthChange": false, "searching": false, "ordering": true, "info": true, "autoWidth": false }); }); </script>
anilkumar kanchanapally9y ago
Give me a example with dynamic data
Manav Pandya9y ago
Nice share .......................