Assign a New Search Box for Table Outside of DataTable

[jusit]

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. }
   

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 :)

Download