Bootstrap DataTable Gridview

Ananth G
7y
8.5k
0
4
25
Blog

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>

Up Next

Bootstrap Login Page

Ebook Download

View all

CSS by AI

Read by 3 people

Download Now!

Learn

View all