Assign a New Search Box for Table Outside of DataTable

Submitted by: 
Language: 
Visitors have accessed this post 564 times.

Creating our Database

First, we create the database that contains our sample data.

I've included a SQL file in the downloadable of this tutorial. All you have to do is import the said file. If you have no idea on how to import, please visit my tutorial How import .sql file to restore MySQL database.

You should be able to create a database named mydatabase.

Adding our Dependencies

Next, we need to add bootstrap and the datatable styles and scripts. These files are included in the downloadable of this tutorial.

Add the styles and scripts in the header section of your page or the scripts below the end body tag.

  1. <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
  2. <link rel="stylesheet" type="text/css" href="datatable/dataTable.bootstrap.min.css">
  3.  
  4. <script src="jquery/jquery.min.js"></script>
  5. <script src="bootstrap/js/bootstrap.min.js"></script>
  6. <script src="datatable/jquery.dataTables.min.js"></script>
  7. <script src="datatable/dataTable.bootstrap.min.js"></script>

Creating our Markup

Next, we create our table and the new search box for our table.

  1. <div class="container">
  2. <h1 class="page-header text-center">Assign a New Search Box for Table</h1>
  3. <div class="row">
  4. <div class="col-sm-8 col-sm-offset-2">
  5. <input type="text" class="form-control input-lg" id="searchBox">
  6. <table id="myTable" class="table table-bordered table-striped">
  7. <thead>
  8. <th>ID</th>
  9. <th>Firstname</th>
  10. <th>Lastname</th>
  11. <th>Address</th>
  12. </thead>
  13. <tbody>
  14. <?php
  15. $conn = new mysqli('localhost', 'root', '', 'mydatabase');
  16. $sql = "SELECT * FROM members";
  17.  
  18. $query = $conn->query($sql);
  19. while($row = $query->fetch_assoc()){
  20. echo
  21. "<tr>
  22. <td>".$row['id']."</td>
  23. <td>".$row['firstname']."</td>
  24. <td>".$row['lastname']."</td>
  25. <td>".$row['address']."</td>
  26. </tr>";
  27.  
  28. }
  29.  
  30. ?>
  31. </tbody>
  32. </table>
  33. </div>
  34. </div>
  35. </div>

Initialize DataTable

Next, we initialize our datatable and assign our new searchbox to our data table.

  1. $(function(){
  2. //inialize datatable
  3. var myTable = $('#myTable').DataTable({
  4. 'paging' : true,
  5. 'lengthChange': false,
  6. 'searching' : true,
  7. 'ordering' : true,
  8. 'info' : false,
  9. 'autoWidth' : false
  10. })
  11.  
  12. //assign a new searchbox for our table
  13. $('#searchBox').on('keyup', function(){
  14. myTable.search(this.value).draw();
  15. });
  16. });

Hiding the Default Search

Lastly, we hide the default search box of our data table.

  1. .dataTables_filter {
  2. display: none;
  3. }

Full HTML

Here's the full HTML code.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Assign a New Search Box for Table Outside of DataTable</title>
  6. <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
  7. <link rel="stylesheet" type="text/css" href="datatable/dataTable.bootstrap.min.css">
  8. <style>
  9. .dataTables_filter {
  10. display: none;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div class="container">
  16. <h1 class="page-header text-center">Assign a New Search Box for Table</h1>
  17. <div class="row">
  18. <div class="col-sm-8 col-sm-offset-2">
  19. <input type="text" class="form-control input-lg" id="searchBox">
  20. <table id="myTable" class="table table-bordered table-striped">
  21. <thead>
  22. <th>ID</th>
  23. <th>Firstname</th>
  24. <th>Lastname</th>
  25. <th>Address</th>
  26. </thead>
  27. <tbody>
  28. <?php
  29. $conn = new mysqli('localhost', 'root', '', 'mydatabase');
  30. $sql = "SELECT * FROM members";
  31.  
  32. $query = $conn->query($sql);
  33. while($row = $query->fetch_assoc()){
  34. echo
  35. "<tr>
  36. <td>".$row['id']."</td>
  37. <td>".$row['firstname']."</td>
  38. <td>".$row['lastname']."</td>
  39. <td>".$row['address']."</td>
  40. </tr>";
  41.  
  42. }
  43.  
  44. ?>
  45. </tbody>
  46. </table>
  47. </div>
  48. </div>
  49. </div>
  50.  
  51.  
  52. <script src="jquery/jquery.min.js"></script>
  53. <script src="bootstrap/js/bootstrap.min.js"></script>
  54. <script src="datatable/jquery.dataTables.min.js"></script>
  55. <script src="datatable/dataTable.bootstrap.min.js"></script>
  56. <!-- generate datatable on our table -->
  57. <script>
  58. $(function(){
  59. //inialize datatable
  60. var myTable = $('#myTable').DataTable({
  61. 'paging' : true,
  62. 'lengthChange': false,
  63. 'searching' : true,
  64. 'ordering' : true,
  65. 'info' : false,
  66. 'autoWidth' : false
  67. })
  68.  
  69. //assign a new searchbox for out table
  70. $('#searchBox').on('keyup', function(){
  71. myTable.search(this.value).draw();
  72. });
  73. });
  74. </script>
  75. </body>
  76. </html>

That ends this tutorial. Happy Coding :)


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.