I have tried to add a data table that many have added, I have followed tutorials but it does not give me the default format (with search and others) as shown in "IMAGE 2". To me it remains as the "IMAGE 1" and I do not know why, what I need to generate the "SEARCH" because it is like a filter that has default and the page, if someone knows why it is like this, I would help by please !!!
ATTACHED CODE
HTML
@extends('admin.layoutADMIN')
@section('content')
<script src="http://code.jquery.com/jquery-1.12.3.js"></script>
<script src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script
src="http://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet"
href="http://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<table class="table" id="table">
<thead>
<tr>
<th class="text-center">ID</th>
<th class="text-center">NOMBRE</th>
<th class="text-center">CATEGORIA</th>
<th class="text-center">VALOR</th>
<th class="text-center">UNIDAD DE MEDIDA</th>
<th class="text-center">FECHA DE CREACION</th>
<th class="text-center"></th>
</tr>
</thead>
<tbody style="text-align: center;">
@foreach ($insumos as $insumos )
<tr>
<td>{{$insumos->id}}</td>
<td>{{$insumos->nombreI}}</td>
<td>{{$insumos->categoriaI}}</td>
<td>{{$insumos->valorI}}</td>
<td>{{$insumos->UmedidaI}}</td>
<td>{{$insumos->created_at}}</td>
<td><button class="edit-modal btn btn-info"
data-info=" {{$insumos->id}},
{{$insumos->nombreI}},
{{$insumos->categoriaI}},
{{$insumos->valorI}},
{{$insumos->UmedidaI}}">
<span class="glyphicon glyphicon-edit"></span> Editar
</button>
<button class="delete-modal btn btn-danger"
data-info=" {{$insumos->id}},
{{$insumos->nombreI}},
{{$insumos->categoriaI}},
{{$insumos->valorI}},
{{$insumos->UmedidaI}}">
<span class="glyphicon glyphicon-trash"></span> Eliminar
</button></td>
</tr>
@endforeach
</tbody>
</table>
<script>
$(document).ready(function() {
$('#table').DataTable();
} );
</script>
@stopCONTROLLER
function viewaddinsumo()
{
$insumos = Insumos::all();
return view('Insumos.verInsumos', compact('insumos'));
} IMAGE 1
IMAGE 2
