Add Datatable features in Laravel 5.4 with Adminlte

Question

Good evening gentlemen, I recently started a project in order to update myself with Laravel 5.4, created a project and am using the adminLTE for the layout. The question is, this Adminlte has a table model that I want to use. but I’m not getting to use all of her functions. I’m almost sure I’m doing the data return in the controller wrong way, I also imagine it’s the way I inject the data into the table. Follow image and code from the files. Can anyone tell me where I’m going wrong?

note that sorting features are not available, nor search or even information from logs and pagination. Now for the code:

my home.blade.php view

$(function () {
    $('#example').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false
    });
  });

@section('content')
<!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="{{base_path('public/bower_components/AdminLTEbootstrap/css/bootstrap.min.css')}}">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  <!-- DataTables -->
  <link rel="stylesheet" href="{{base_path('public/bower_components/AdminLTE/plugins/datatables/dataTables.bootstrap.css')}}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{{base_path('public/bower_components/AdminLTE/dist/css/AdminLTE.min.css')}}">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="{{base_path('public/bower_components/AdminLTE/dist/css/skins/_all-skins.min.css')}}">

 
   <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">Hover Data Table</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="lista-permissoes" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>Ação</th>
                  <th>Nome</th>
                  <th>Descrição</th>
                </tr>
                </thead>
                <tbody>
                @foreach ($permissao as $permissao)
                <tr>
                  <form action="{{route('permissao.destroy',$permissao->id)}}" method="post">                  	<td>
                  		<a href="/permissao/{{$permissao->id}}/edit" title="Editar registro" class="btn btn-warning glyphicon glyphicon-pencil"></a>
                      {{ method_field('DELETE') }}
                      {{ csrf_field() }}
                      <button type="submit" class="btn btn-danger glyphicon glyphicon-remove " title="Excluir registro"></button>
                  	</td>
                  	<td>{{ $permissao->nome }}</td>
                  	<td>{{ $permissao->descricao }}</td>
                  </form>
                </tr>
				@endforeach
                
                </tbody>
              </table>
            </div>
            <!-- /.box-body -->
            </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
<!-- jQuery 2.2.3 -->
<script src="{{base_path('public/bower_components/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js')}}"></script>
<!-- Bootstrap 3.3.6 -->
<script src="{{base_path('public/bower_components/AdminLTE/bootstrap/js/bootstrap.min.js')}}"></script>
<!-- DataTables -->
<script src="{{base_path('public/bower_components/AdminLTE/plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{base_path('public/bower_components/AdminLTE/plugins/datatables/dataTables.bootstrap.min.js')}}"></script>
<!-- SlimScroll -->
<script src="{{base_path('public/bower_components/AdminLTE/plugins/slimScroll/jquery.slimscroll.min.js')}}"></script>
<!-- FastClick -->
<script src="{{base_path('public/bower_components/AdminLTE/plugins/fastclick/fastclick.js')}}"></script>
<!-- AdminLTE App -->
<script src="{{base_path('public/bower_components/AdminLTE/dist/js/app.min.js')}}"></script>
<!-- AdminLTE for demo purposes -->
<script src="{{base_path('public/bower_components/AdminLTE/dist/js/demo.js')}}"></script>
<!-- page script -->
<script>
  
</script>
        
@endsection()

My Permissaocontroller

public function index()
{
    $caminhos = [
          ['url'=>'/admin','titulo'=>'Início'],
          ['url'=>'here','titulo'=>'Permissões']
          ];
    $permissao = Permissao::orderBy('created_at', 'desc')->paginate(10);
    return view('permissoes.home', compact('permissao', 'caminhos'));
}

My route

Route::resource('permissao', 'PermissaoController');

I guess I didn’t forget anything.

Answer 1

After a good night’s sleep, everything becomes clearer. In fact, in addition to declaring the js and css paths out of the page. The paths were wrong, I was using the wrong variable.

<link rel="stylesheet" href="{{asset("/bower_components/AdminLTEbootstrap/css/bootstrap.min.css")}}">