Datatables not work
Datatables not work
cq522138
Posts: 2Questions: 1Answers: 0
hi
I have started to try my first datatable plugin, but it is not working.
I have included the datatable js and css files in master.php like this
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
</head>
<body>
>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script>
$(document).ready( function () {
$('#table_id').DataTable();
});
</script>
</body>
I have given id to a table and call the script given in datatables website.
@extends('admin.layouts.master')
@section('title')
Danh mục sản phẩm
@endsection
@push('css')
@endpush
@section('content')
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<div class="table-agile-info">
<div class="panel panel-default">
<div class="panel-heading">
Responsive Table
</div>
<div class="table-responsive">
<table id="table_id" class="table table-striped b-t b-light">
<thead>
<tr>
<th></th>
<th>tên danh mục</th>
<th>Mô tả </th>
<th>Hiển thị</th>
<th>Ngày thêm</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach($category_products as $key=>$cate_product)
<tr>
<td>{{$key+1}}</td>
<td>{{$cate_product->category_name}}</td>
<td>{{$cate_product->category_description}}</td>
<td>
@if($cate_product->category_status == 0)
Ẩn
@else
Hiển thị
@endif
</td>
<td>{{$cate_product->updated_at}}</td>
<td>
<a href="{{route('admin.category.edit',$cate_product->id)}}"
class="btn btn-info waves-effect">
<i class="label label-info pull-right">sua</i>
</a>
<button class="btn btn-danger waves-effect" type="button"
onclick="deleteCategory({{$cate_product->id}})">
<i class="label label-danger pull-right">xoa</i>
</button>
<form id="delete-from-{{$cate_product->id}}"
action="{{route('admin.category.destroy',$cate_product->id)}}"
method="POST" style="display: none;">
@csrf
@method('DELETE')
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<footer class="panel-footer">
<div class="row">
<div class="col-sm-5 text-center">
@if(count($category_products) <= 5)
<small class="text-muted inline m-t-sm m-b-sm">hiển thị
<?php echo count($category_products) ?>/<?php echo count($category_products) ?> danh mục sản phẩm
</small>
@else
<small class="text-muted inline m-t-sm m-b-sm">hiển thị
5/<?php echo count($category_products) ?> danh mục sản phẩm
</small>
@endif
</div>
<div class="col-sm-7 text-right text-center-xs">
<ul class="pagination pagination-sm m-t-none m-b-none">
{{$category_products->links()}}
</ul>
</div>
</div>
</footer>
</div>
</div>
</section>
</section>
<!--main content end-->
@endsection
@push('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script type="text/javascript">
function deleteCategory(id) {
const swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: 'btn btn-success',
cancelButton: 'btn btn-danger'
},
buttonsStyling: false
})
swalWithBootstrapButtons.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
reverseButtons: true
}).then((result) => {
if (result.value) {
event.preventDefault();
document.getElementById('delete-from-' + id).submit();
} else if (
/* Read more about handling dismissals below */
result.dismiss === Swal.DismissReason.cancel
) {
swalWithBootstrapButtons.fire(
'Cancelled',
'Your imaginary file is safe :)',
'error'
)
}
})
}
</script>
@endpush
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.
This discussion has been closed.
Answers
Could it be a timing issue? Is the table being created after the DataTables initialisation script?
Colin
nothing happen after the DataTables initialisation script...
Could you link to a page demonstrating the issue, please, so we can debug it. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin