Toggle navigation
TUTORIALS
Basics Of Computer Science
HTML
HTML5
CSS
CSS3
Bootstrap 3
Bootstrap 4
Materialize CSS
JavaScript
jQuery
Ajax
AngularJS
C - Language
Java
PHP
Python
SEO
QUIZ
INTERVIEW QUESTIONS
REFERENCES
Practice Templates
Bootstrap Templates
PHP Projects
PLUGINS
Bootstrap 3 Plugins
Bootstrap 4 Plugins
Static Menus
Responsive Menus
Dropdown
Tabs & Pills
Modal Boxes (Dialog box)
Gallery Plugins
Sliders
Buttons
Dynamic Forms
Forms
Image Effects
G K
New
CURRENT AFFAIRS
New
MORE
IPC Sections
New
School Mathematics
Blog
CODE EDITOR
New
EXECUTE
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap DataTables</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- Bootstrap DataTable --> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css"> <!-- Font icons --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- jQuery --> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> <!-- DataTables --> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script> <!-- Bootstrap JS --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container" style="padding-top:20px;"> <table id="DataTablePage" class="table table-striped table-hover table-bordered nowrap" cellspacing="0" width="100%"> <thead> <tr> <th>S.No</th> <th>Name</th> <th>Email Id</th> <th>Mobile</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Free Time Learn</td> <td>freetimelearn@gmail.com</td> <td>90XXXX3210</td> </tr> <tr> <td>2</td> <td>F T L</td> <td>info@freetimelearn.com</td> <td>9963XXXX68</td> </tr> <tr> <td>3</td> <td>Ram</td> <td>ram@yahoo.com</td> <td>985457XXX23</td> </tr> <tr> <td>4</td> <td>Chinnu</td> <td>chinnu258@gmail.com</td> <td>9985XXX323</td> </tr> <tr> <td>5</td> <td>Venkat</td> <td>venkat@freetimelearn.com</td> <td>88002XXX88</td> </tr> <tr> <td>6</td> <td>Suresh</td> <td>suresh@gmail.com</td> <td>9700XXXX32</td> </tr> <tr> <td>7</td> <td>Ramesh</td> <td>ramesh@gmail.com</td> <td>8754XXX457</td> </tr> <tr> <td>8</td> <td>Reddy</td> <td>reddy@freetimelearn.com</td> <td>996646XXX6</td> </tr> <tr> <td>9</td> <td>V V R Reddy</td> <td>ramana@gmail.com</td> <td>9963XXXX99</td> </tr> <tr> <td>10</td> <td>Chanti</td> <td>chanti@gmail.com</td> <td>901XXXX210</td> </tr> <tr> <td>11</td> <td>Madhu</td> <td>madhu@gmail.com</td> <td>954XXXX459</td> </tr> <tr> <td>12</td> <td>Srini</td> <td>srinu@yahoo.com</td> <td>9494XXXX94</td> </tr> </tbody> </table> </div> <script type="text/javascript"> $(document).ready(function () { $('#DataTablePage').DataTable(); }); </script> </body> </html>
×
Close
Bootstrap DataTables, Data Tables - Free Time Learning
Sample Data
