Bootstrap

Browser Support
Advantages of Bootstrap
Bootstrap Packages
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>
  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>
  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>