Adding Datatable Features in Laravel 5.4 with AdminLTE

Navigation
1

Good evening, ladies, I recently started a project in order to upgrade with laravel 5.4, I created a project and I'm using adminLTE to the layout. The thing is, this AdminLTe has a table template that I want to use. but I'm not able to use all of her functions. I am almost sure that I am doing the data return in the controller in the wrong way, wrong also I imagine it is the way I inject the data into the table. Follows image and codes of the files. Can someone tell me where I'm going wrong?

Notethatsortingfeaturesarenotavailable,norissearchorevenloggingandpaginginformation.Nowthecodes:

Myviewhome.blade.php

$(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 PermissionController 

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 do not think I've forgotten anything.

    
asked by anonymous 19.05.2017 / 04:12

1 answer

1

After a good night's sleep, everything becomes clearer. In fact, besides declaring the paths of js and css off the page. The paths were wrong, I was using the wrong variable. 

<link rel="stylesheet" href="{{asset("/bower_components/AdminLTEbootstrap/css/bootstrap.min.css")}}">
    
19.05.2017 / 14:56
HTML Layout Ratio HTML component for selecting multiple items