title: Bootstrap 4 datatable Javascript libaries 2019
body: <p>I have created a table in bootstrap 4 and have populated it in my website with data from myphpadmin database using php/sql. However, i am looking to use the javascript libraries to implement search, Pagination, next page etc. </p>
  
  <p>I have already tried numerous scripts and css libraries and none of them appear to be working so i am starting to think that there may be an issue with my coding. This is shown below: </p>
  
  <pre><code>&lt;!--stylesheets--&gt;
  
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
  &lt;link rel ="sylesheet" type ="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"&gt;
  
  &lt;link href="https://fonts.googleapis.com/css?family=Dosis:300,400,700" rel="stylesheet"&gt;
  &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"&gt;
  
  &lt;link rel="stylesheet" href="images/font-awesome.css" &gt;
  &lt;link rel = "stylesheet" href="style.css"&gt;
  
  
  &lt;!--scripts--&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;script type ="text/javascript" src ="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script type ="text/javascript" src ="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;!-- main body of webpage that will contain table of patients--&gt;
  
  &lt;div class='container mt-5 pt-5'&gt;
              &lt;table class="table table-striped table-bordered patientsTable" style="width: 100%"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th scope="col"&gt;First Name&lt;/th&gt;
                          &lt;th scope="col"&gt;Surname&lt;/th&gt;
                          &lt;th scope="col"&gt;DOB&lt;/th&gt;
                          &lt;th scope="col"&gt;Address&lt;/th&gt;
                          &lt;th scope="col"&gt;Town&lt;/th&gt;
                          &lt;th scope="col"&gt;Postcode&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
  
  &lt;?php
  
      while($row = $result -&gt;fetch_assoc()){
          $rowid = $row['id'];
          $firstname = $row['firstname'];
          $surname = $row ['surname'];
          $dob = $row['dob'];
          $address = $row['address'];
          $town = $row['town'];
          $postcode = $row['postcode'];
  
  
          echo"
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;$firstname&lt;/td&gt;
                      &lt;td&gt;$surname &lt;/td&gt;
                      &lt;td&gt;$dob&lt;/td&gt;
                      &lt;td&gt;$address&lt;/td&gt;
                      &lt;td&gt;$town&lt;/td&gt;
                      &lt;td&gt;$postcode&lt;/td&gt;
                      &lt;td&gt;&lt;a class = 'btn btn-danger' href ='patientsmedication.php?editid=$rowid'&gt;View&lt;/a&gt;&lt;/td&gt;
                  &lt;/tr&gt;";
  
      }
  ?&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
      $(document).ready( function () {
          $('.patientsTable').DataTable();
      } );
      &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>I am looking for the search bar and other features to be implemented but at the moment it is just a plain table with the information from the database. 
  Any help would be gratefully appreciated as i have spent half a day looking at this small issue.</p>