Assign a New Search Box for Table Outside of DataTable

Submitted by nurhodelta_17 on Tuesday, May 15, 2018 - 19:42.

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 :)
Tags
php
MYSQL
jQuery
data table
Search
filter
assign new filter
assign new search

Add new comment

About text formats
  • 881 views