Skip to main content

How to implement Data Table on Table

Screenshot
Body

Getting Started

If you want to read the documentation about Data Table, you may visit their official site using this link. I've used CDN for Bootstrap, jQuery and Font Awesome so you need internet connection for them to work especially jQuery since its a dependency of Data Table. Data Table used in this tutorial is available in the downloadable file of this tutorial.

Creating our Database

First, we are going to create our database as well as insert sample data into our database to show in our table. 1. Open phpMyAdmin. 2. Click databases, create a database and name it as datatable. 3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.
  1. CREATE TABLE `members` (
  2. `memid` int(11) NOT NULL AUTO_INCREMENT,
  3. `firstname` varchar(30) NOT NULL,
  4. `lastname` varchar(30) NOT NULL,
  5. `address` text NOT NULL,
  6. PRIMARY KEY(`memid`)
  1. INSERT INTO `members` (`memid`, `firstname`, `lastname`, `address`) VALUES
  2. (1, 'Neovic', 'Devierte', 'Silay City, Negros Occidental'),
  3. (2, 'Julyn', 'Divinagracia', 'Mun. of E.B. Magalona, Negros Occidental'),
  4. (3, 'Lee Ann', 'Apilinga', 'Silay City, Negros Occidental'),
  5. (4, 'Gemalyn', 'Cepe', 'Bilar, Bohol');
database_sql

index.php

Lastly, we're gonna create our index which contains our html table, php code in fetching data from our database and Data Table script.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>How to implement Data Table on Table</title>
  5. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  6. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  7. <!-- data table css -->
  8. <link rel="stylesheet" href="datatable/dataTables.bootstrap.min.css">
  9. </head>
  10. <body>
  11. <div class="container">
  12. <h1 class="page-header text-center">How to implement Data Table on Table</h1>
  13. <div class="col-md-8 col-md-offset-2">
  14. <table class="table table-bordered table-striped" id="example1">
  15. <thead>
  16. <th>Member ID</th>
  17. <th>Firstname</th>
  18. <th>Lastname</th>
  19. <th>Address</th>
  20. </thead>
  21. <tbody>
  22. <?php
  23. //database connection
  24. $conn = new mysqli('localhost', 'root', '', 'datatable');
  25. if ($conn->connect_error){
  26. die("Connection Failed". $conn->connect_error);
  27. }
  28.  
  29. $sql = "select * from members";
  30. $query = $conn->query($sql);
  31. while($row=$query->fetch_array()){
  32. ?>
  33. <tr>
  34. <td><?php echo $row['memid']; ?></td>
  35. <td><?php echo $row['firstname']; ?></td>
  36. <td><?php echo $row['lastname']; ?></td>
  37. <td><?php echo $row['address']; ?></td>
  38. </tr>
  39. <?php
  40. }
  41. ?>
  42. </tbody>
  43. </table>
  44. </div>
  45. </div>
  46.  
  47. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  48. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  49. <!-- data table js -->
  50. <script src="datatable/jquery.dataTables.min.js"></script>
  51. <script src="datatable/dataTables.bootstrap.min.js"></script>
  52. <script>
  53. $(function () {
  54. $('#example1').DataTable()
  55. $('#example2').DataTable({
  56. 'paging' : true,
  57. 'lengthChange': false,
  58. 'searching' : false,
  59. 'ordering' : true,
  60. 'info' : true,
  61. 'autoWidth' : false
  62. })
  63. })
  64. </script>
  65. </body>
  66. </html>
That ends this tutorial. Happy Coding :)

Add new comment