Datatables not working

Datatables not working

av_rajeav_raje Posts: 2Questions: 0Answers: 0
edited January 2020 in Free community support

Hi
I have started to try my first datatable plugin, but it is not working. The coding so far is simple, so I will explain.
I have included the datatable js and css files in header.php
I have given id to a table and call the script given in datatables website.
I draw data from a table called tbl_category.. The data is loading alright but the datatables plugin is not. No error showing though. Thank you in advance.

header.php <head> portion

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Admin | Dashboard</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

         <!-- jQuery 3 -->
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <!-- Bootstrap 3.3.7 -->
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- iCheck -->
    <script src="plugins/iCheck/icheck.min.js"></script>
    <!-- AdminLTE App -->
    <script src="dist/js/adminlte.min.js"></script>
    <script src="bower_components/sweetalert/sweetalert.js"></script>

    <!-- DataTables -->

    <script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
   

  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    
  <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">  
  
  <!-- DataTables -->
  <link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css"> 
  
  <!-- Google Font -->
  <link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">    
          
</head>


**category.php relevant portion**

<div class="col-md-8">
                  <table id="tablecategory" class="table table-striped>">
                      <thead>
                          <tr>
                              <th>#</th>
                              <th>CATEGORY</th>
                              <th>EDIT</th>
                              <th>DELETE</th>
                              
                          </tr>
                      </thead>
                      <tbody>
                        <?php
                          $select= $pdo->prepare("select * from tbl_category order by catid desc");
                          $select->execute();
                          while ($row=$select->fetch(PDO::FETCH_OBJ))
                          {
                              echo'
                              <tr>
                              <td>'.$row->catid.'</td>
                              <td>'.$row->category.'</td>
                              <td>
                              <button type = "submit" value="'.$row->catid.'" class="btn btn-success" name="btnedit">Edit</button>
                              </td>
                              <td>
                              <button type = "submit" value="'.$row->catid.'" class="btn btn-danger" name="btndelete">Delete</button>
                              </td>
                              </tr>';
                          }
                          ?>
                         <tr>
                         </tr>           
                        </tbody>
                  </table>                  
              </div>   
              </form>
              </div>
               
              <!-- /.box-body -->

              <div class="box-footer">
                
              </div>
            
          </div>
        
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  
  <!--Call this single datatable function-->
  <script>
      $(document).ready( function () 
        {
          $('#tablecategory').DataTable();
        } );
    </script>
  
  
  <?php
    include_once 'footer.php';
   ?>

  <!-- Main Footer -->

Replies

  • pauloh159pauloh159 Posts: 2Questions: 0Answers: 0
    edited January 2020

    Hello av_raje, I managed to execute the datatable by removing the last TR from the table

      <tbody>
         <!-- remove this item 
          <tr>
          </tr> 
          -->         
        </tbody>
    
  • av_rajeav_raje Posts: 2Questions: 0Answers: 0

    Oh my word! That worked. Thank you so much Pauloh159, you're a star!

This discussion has been closed.