In our books, authors and publishers pages, we used DataTables to show the data from our database. By calling the Search API provided by DataTables, we implemented the global search function for each table. Details are showing below:

We imported the JavaScript source by adding <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> in

We used <table id="table" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%"> to customise our table and added each header and row by using <thead> and <tr>.

To implement the search function, we called the global search API by using the JavaScript below and it also made our table sortable and it can change numbers of entries that are shown each page.

<script>
      $(document).ready(function() {
        $('#table').DataTable({
          "order": [[ 0, "asc" ]],
          "iDisplayLength": 50
        });
      });
 </script>