Post
Ask Question

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
GridView Design by using DataTable

Add the below code to Head tag.
  1. <meta charset="utf-8">    
  2.    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
  3.    <title>AdminLTE 2 | Data Tables</title>    
  4.    <!-- Tell the browser to be responsive to screen width -->    
  5.    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">    
  6.    <!-- Bootstrap 3.3.6 -->    
  7.    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" />    
  8.    <!-- Font Awesome -->    
  9.    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">    
  10.    <!-- Ionicons -->    
  11.    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">    
  12.    <!-- DataTables -->    
  13.    <link href="bootstrap/css/dataTables.bootstrap.css" rel="stylesheet" />    
  14.    <!-- Theme style -->       
  15.    <link href="bootstrap/css/AdminLTE.min.css" rel="stylesheet" />    
  16.    <!-- AdminLTE Skins. Choose a skin from the css/skins    
  17.       folder instead of downloading all of them to reduce the load. -->       
  18.    <link href="bootstrap/css/_all-skins.min.css" rel="stylesheet" />    
  19.    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->    
  20.    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->    
  21.    <!--[if lt IE 9]>    
  22.  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>    
  23.  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>    
  24. <script src="bootstrap/js/jquery-2.2.3.min.js"></script>  
  25. <!-- Bootstrap 3.3.6 -->  
  26. <script src="bootstrap/js/bootstrap.min.js"></script>  
  27.   
  28. <!-- DataTables -->  
  29. <script src="bootstrap/js/jquery.dataTables.min.js"></script>  
  30. <script src="bootstrap/js/dataTables.bootstrap.js"></script>  
  31. <script src="bootstrap/js/app.min.js"></script>  
  32. <script>  
  33. $(function () {  
  34. $("#example1").DataTable({  
  35. "pageLength": 3  
  36. });  
  37. $('#example2').DataTable({  
  38. "pageLength": 3,  
  39. "paging": true,  
  40. "lengthChange": false,  
  41. "searching": false,  
  42. "ordering": true,  
  43. "info": true,  
  44. "autoWidth": false  
  45. });  
  46. });  
  47. </script>  
  48.   
  49.  <![endif]-->    
  50.    <style>    
  51.        .content-wrapper, .right-side, .main-footer {    
  52.        margin-left: 0px;    
  53.        }    
  54.    </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.

  1. <div class="box">  
  2.                            <div class="box-header">  
  3.                                <h3 class="box-title">Hover Data Table</h3>  
  4.                            </div>  
  5.                            <!-- /.box-header -->  
  6.                            <div class="box-body">  
  7.                                <table id="example2" class="table table-bordered table-hover">  
  8.                                    <thead>  
  9.                                        <tr>  
  10.                                            <th>Rendering engine</th>  
  11.                                            <th>Browser</th>  
  12.                                            <th>Platform(s)</th>  
  13.                                            <th>Engine version</th>  
  14.                                            <th>CSS grade</th>  
  15.                                        </tr>  
  16.                                    </thead>  
  17.                                    <tbody>                                        
  18.                                        <tr>  
  19.                                            <td>KHTML</td>  
  20.                                            <td>Konqureror 3.5</td>  
  21.                                            <td>KDE 3.5</td>  
  22.                                            <td>3.5</td>  
  23.                                            <td>A</td>  
  24.                                        </tr>  
  25.                                        <tr>  
  26.                                            <td>Tasman</td>  
  27.                                            <td>Internet Explorer 4.5</td>  
  28.                                            <td>Mac OS 8-9</td>  
  29.                                            <td>-</td>  
  30.                                            <td>X</td>  
  31.                                        </tr>  
  32.                                        <tr>  
  33.                                            <td>Tasman</td>  
  34.                                            <td>Internet Explorer 5.1</td>  
  35.                                            <td>Mac OS 7.6-9</td>  
  36.                                            <td>1</td>  
  37.                                            <td>C</td>  
  38.                                        </tr>  
  39.                                        <tr>  
  40.                                            <td>Tasman</td>  
  41.                                            <td>Internet Explorer 5.2</td>  
  42.                                            <td>Mac OS 8-X</td>  
  43.                                            <td>1</td>  
  44.                                            <td>C</td>  
  45.                                        </tr>  
  46.                                        <tr>  
  47.                                            <td>Misc</td>  
  48.                                            <td>NetFront 3.1</td>  
  49.                                            <td>Embedded devices</td>  
  50.                                            <td>-</td>  
  51.                                            <td>C</td>  
  52.                                        </tr>  
  53.                                        <tr>  
  54.                                            <td>Misc</td>  
  55.                                            <td>NetFront 3.4</td>  
  56.                                            <td>Embedded devices</td>  
  57.                                            <td>-</td>  
  58.                                            <td>A</td>  
  59.                                        </tr>  
  60.                                        <tr>  
  61.                                            <td>Misc</td>  
  62.                                            <td>Dillo 0.8</td>  
  63.                                            <td>Embedded devices</td>  
  64.                                            <td>-</td>  
  65.                                            <td>X</td>  
  66.                                        </tr>  
  67.                                        <tr>  
  68.                                            <td>Misc</td>  
  69.                                            <td>Links</td>  
  70.                                            <td>Text only</td>  
  71.                                            <td>-</td>  
  72.                                            <td>X</td>  
  73.                                        </tr>  
  74.                                        <tr>  
  75.                                            <td>Misc</td>  
  76.                                            <td>Lynx</td>  
  77.                                            <td>Text only</td>  
  78.                                            <td>-</td>  
  79.                                            <td>X</td>  
  80.                                        </tr>  
  81.                                        <tr>  
  82.                                            <td>Misc</td>  
  83.                                            <td>IE Mobile</td>  
  84.                                            <td>Windows Mobile 6</td>  
  85.                                            <td>-</td>  
  86.                                            <td>C</td>  
  87.                                        </tr>  
  88.                                        <tr>  
  89.                                            <td>Misc</td>  
  90.                                            <td>PSP browser</td>  
  91.                                            <td>PSP</td>  
  92.                                            <td>-</td>  
  93.                                            <td>C</td>  
  94.                                        </tr>  
  95.                                        <tr>  
  96.                                            <td>Other browsers</td>  
  97.                                            <td>All others</td>  
  98.                                            <td>-</td>  
  99.                                            <td>-</td>  
  100.                                            <td>U</td>  
  101.                                        </tr>  
  102.                                    </tbody>  
  103.                                    <tfoot>  
  104.                                        <tr>  
  105.                                            <th>Rendering engine</th>  
  106.                                            <th>Browser</th>  
  107.                                            <th>Platform(s)</th>  
  108.                                            <th>Engine version</th>  
  109.                                            <th>CSS grade</th>  
  110.                                        </tr>  
  111.                                    </tfoot>  
  112.                                </table>  
  113.                            </div>  
  114.                            <!-- /.box-body -->  
  115.                        </div>  
The Output is shown below.

 
 
Sample 2
  1. <div class="box">  
  2.                            <div class="box-header">  
  3.                                <h3 class="box-title">Data Table With Full Features</h3>  
  4.                            </div>  
  5.                            <!-- /.box-header -->  
  6.                            <div class="box-body">  
  7.                                <table id="example1" class="table table-bordered table-striped">  
  8.                                    <thead>  
  9.                                        <tr>  
  10.                                            <th>Rendering engine</th>  
  11.                                            <th>Browser</th>  
  12.                                            <th>Platform(s)</th>  
  13.                                            <th>Engine version</th>  
  14.                                            <th>CSS grade</th>  
  15.                                        </tr>  
  16.                                    </thead>  
  17.                                    <tbody>                                      
  18.                                        <tr>  
  19.                                            <td>Tasman</td>  
  20.                                            <td>Internet Explorer 5.2</td>  
  21.                                            <td>Mac OS 8-X</td>  
  22.                                            <td>1</td>  
  23.                                            <td>C</td>  
  24.                                        </tr>  
  25.                                        <tr>  
  26.                                            <td>Misc</td>  
  27.                                            <td>NetFront 3.1</td>  
  28.                                            <td>Embedded devices</td>  
  29.                                            <td>-</td>  
  30.                                            <td>C</td>  
  31.                                        </tr>  
  32.                                        <tr>  
  33.                                            <td>Misc</td>  
  34.                                            <td>NetFront 3.4</td>  
  35.                                            <td>Embedded devices</td>  
  36.                                            <td>-</td>  
  37.                                            <td>A</td>  
  38.                                        </tr>  
  39.                                        <tr>  
  40.                                            <td>Misc</td>  
  41.                                            <td>Dillo 0.8</td>  
  42.                                            <td>Embedded devices</td>  
  43.                                            <td>-</td>  
  44.                                            <td>X</td>  
  45.                                        </tr>  
  46.                                        <tr>  
  47.                                            <td>Misc</td>  
  48.                                            <td>Links</td>  
  49.                                            <td>Text only</td>  
  50.                                            <td>-</td>  
  51.                                            <td>X</td>  
  52.                                        </tr>  
  53.                                        <tr>  
  54.                                            <td>Misc</td>  
  55.                                            <td>Lynx</td>  
  56.                                            <td>Text only</td>  
  57.                                            <td>-</td>  
  58.                                            <td>X</td>  
  59.                                        </tr>  
  60.                                        <tr>  
  61.                                            <td>Misc</td>  
  62.                                            <td>IE Mobile</td>  
  63.                                            <td>Windows Mobile 6</td>  
  64.                                            <td>-</td>  
  65.                                            <td>C</td>  
  66.                                        </tr>  
  67.                                        <tr>  
  68.                                            <td>Misc</td>  
  69.                                            <td>PSP browser</td>  
  70.                                            <td>PSP</td>  
  71.                                            <td>-</td>  
  72.                                            <td>C</td>  
  73.                                        </tr>  
  74.                                        <tr>  
  75.                                            <td>Other browsers</td>  
  76.                                            <td>All others</td>  
  77.                                            <td>-</td>  
  78.                                            <td>-</td>  
  79.                                            <td>U</td>  
  80.                                        </tr>  
  81.                                    </tbody>  
  82.                                    <tfoot>  
  83.                                        <tr>  
  84.                                            <th>Rendering engine</th>  
  85.                                            <th>Browser</th>  
  86.                                            <th>Platform(s)</th>  
  87.                                            <th>Engine version</th>  
  88.                                            <th>CSS grade</th>  
  89.                                        </tr>  
  90.                                    </tfoot>  
  91.                                </table>  
  92.                            </div>  
  93.                            <!-- /.box-body -->  
  94.                        </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.
  1. <script>  
  2.        $(function () {  
  3.            $("#example1").DataTable({  
  4.                "pageLength": 3  
  5.            });  
  6.            $('#example2').DataTable({  
  7.                "pageLength": 3,  
  8.                "paging": true,  
  9.                "lengthChange": false,  
  10.                "searching": false,  
  11.                "ordering": true,  
  12.                "info": true,  
  13.                "autoWidth": false  
  14.            });  
  15.        });  
  16. </script>