Datatables not working
Datatables not working
av_raje
Posts: 2Questions: 0Answers: 0
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 -->
This discussion has been closed.
Replies
Hello av_raje, I managed to execute the datatable by removing the last TR from the table
Oh my word! That worked. Thank you so much Pauloh159, you're a star!