Datatable not showing properly in the laravel blade file - laravel

Question

I'm getting one issue in the datable. I added datatable in my laravel blade file, but when I clicked on the menu (call blade file). Then it shows a normal table, but when I refresh the same page again and then it shows datatable properly. My question is when I click on the menu(call blade file), then why it is not showing datatable properly. It shows a normal table only. How to fix this.
please check imagesthis image is before refresh
this image is after refresh
and this is my blade file
#extends('backEnd.layout')
<!--page level css starts-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<!--end of page level css-->
#section('content')
<div class="padding">
<div class="box">
<div class="box-header dker">
<h3>Product List</h3>
<small>
{{ trans('backLang.home') }} /
Product List
</small>
</div>
<table class="table table-bordered" id="table" >
<thead class=" primary">
<tr >
<th class="text-center">Category</th>
<th class="text-center">Title</th>
<th class="text-center">Make</th>
<th class="text-center">Rate</th>
<th class="text-center">Status</th>
</tr>
</thead>
<tbody>
#foreach($records as $record)
<tr>
<td class="text-center">{{$record->section_title}}</td>
<td class="text-center">{{$record->title_en}}</td>
<td class="text-center">{{$record->make}}</td>
<td class="text-center">{{$record->rate}}</td>
<td class="text-center">#if($record->status != 1) Used
#else New #endif
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
#endsection
#section('footerInclude')
<script type="text/javascript">
$("#checkAll").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
$("#action").change(function () {
if (this.value == "delete") {
$("#submit_all").css("display", "none");
$("#submit_show_msg").css("display", "inline-block");
} else {
$("#submit_all").css("display", "inline-block");
$("#submit_show_msg").css("display", "none");
}
});
</script>
<script>
$(document).ready(function() {
$('#table').DataTable();
} );
</script>
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
#endsection
any help will be appreciated.
Thanks in advance.

Answer 1

Your Blade file should be like this.
You should add script files before you write your script.
#extends('backEnd.layout')
<!--page level css starts-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<!--end of page level css-->
#section('content')
<div class="padding">
<div class="box">
<div class="box-header dker">
<h3>Product List</h3>
<small>
{{ trans('backLang.home') }} /
Product List
</small>
</div>
<table class="table table-bordered" id="table" >
<thead class=" primary">
<tr >
<th class="text-center">Category</th>
<th class="text-center">Title</th>
<th class="text-center">Make</th>
<th class="text-center">Rate</th>
<th class="text-center">Status</th>
</tr>
</thead>
<tbody>
#foreach($records as $record)
<tr>
<td class="text-center">{{$record->section_title}}</td>
<td class="text-center">{{$record->title_en}}</td>
<td class="text-center">{{$record->make}}</td>
<td class="text-center">{{$record->rate}}</td>
<td class="text-center">#if($record->status != 1) Used
#else New #endif
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#table').DataTable();
$("#checkAll").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
$("#action").change(function () {
if (this.value == "delete") {
$("#submit_all").css("display", "none");
$("#submit_show_msg").css("display", "inline-block");
} else {
$("#submit_all").css("display", "inline-block");
$("#submit_show_msg").css("display", "none");
}
});
} ;
</script>
#section('footerInclude')
#endsection