How to implement DataTables in Laravel 5.4?

Question

How to implement DataTables in Laravel 5.4?

Navigation

#1 by (0 votes)

1

I'm trying to use the DataTables tool: link , its implementation seems to be very simple, I put the CSS link, JavaScript, but when I update the page, nothing happens, follow my code:

@extends('layouts.app')
@section('content')

<link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<form class="navbar-form navbar-left" role="search" action="{!! url('/pesquisar') !!}" method="post" style="margin-left: 40%;">
        <div class="form-group">
          {!! csrf_field() !!}
          <input type="text" name="texto" class="form-control" placeholder="Pesquisar" >
        </div>
        <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
</form>
<table id="octable" class="display" cellspacing="0" width="100%">
 <tr>
   <th><center>Imagem</center></th>
   <th>Código</th>
   <th><center>Produto</center></th>
   <th>Custo</th>
   <th>Preço</th>
   <th>Atualização</th>
   <th>Status</th>
   <th>Estoque</th>
   <th>Distruibuidor</th>
   <th style="width: 100px;">Ações</th>
 </tr>
 <tr>
   @foreach($produtos as $produto)
   <td><img src="{{$produto->image->erp_image}}" alt="" style="width:50px;height:50px;"></td>
   <td>{{$produto->erp_productid}}</td>
  <td>{{$produto->descricao->erp_name}}</td>
   <td>{{$produto->erp_cost}}</td>
   <td>{{$produto->erp_price}}</td>
   <td>{{$produto->erp_modifieddate}}</td>
   <td>{{$produto->erp_status}}</td>
   <td>{{$produto->erp_quantity}}</td>
   <td>{{$produto->erp_distributor}}</td>
   <td> <a href="{!! url('editar/'. $produto->erp_productid) !!}" class="btn btn-primary" role="button"><i class="glyphicon glyphicon-edit"></i></a>
   <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-remove"></i></button></td>
 </tr>

@endforeach
</table>
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#octable').DataTable();
});
</script>
<center>{{$produtos->links()}}</center>
@endsection

Any suggestions?

laravel laravel-5 laravel-blade

asked by anonymous 21.03.2017 / 12:59

1 answer

How to bring a List in a JPQL query with constructor Dynamic Input with JQuery

score 0 · Answer 1

There is an abstraction created for laravel to manage this.

I will write a tutorial on how to implement it very simply and quickly. However, there are other right ways to do in documentation , just look at it.

Follow the project on GitHub link

Follow the link link

Come on.

Follow the installation procedures described in github, then follow the steps below:

In the routes / web.php file add the following route:

Route::get('/pagina/listar', 'ControllerAqui@listar')->name('listar');

It will be responsible for retrieving the data that will be displayed in the table.

Then go to your controller and implement a method similar to this:

public function listar(Request $request)
{   
    // Consulta os dados a serem exibidos
    $query = PersonModel::select(['id','name', 'cpf', 'rg', 'phone']);
    // Monta os dados de acordo com o datatable
    $datatable =  Datatables::of($query);

    /**
    *
    * Retorna os dados no formato 
    * requisitado pelo datatable e 
    * impede o envio da coluna action
    * para a tabela.
    *
    * Isso porque a coluna action,
    * não possui dados, e sim os botões 
    * de ação editar e excluir. 
    **/
    return $datatable->blacklist(['action'])->make(true);
}

This already ensures that a json is returned when accessing the defined route.

After this, create a view with the following content

@extends('layouts.admin')
@section('page-title','Pessoas')
@section('content')
    <table id="people-table" class="col-md-12 table table-striped table-bordered">
        <thead>
            <tr>
            <th>Nome</th>
            <th>CPF</th>
            <th>RG</th>
            <th>Telefone</th>
            <th width="17%">Ação</th>
        </tr>
    </thead>
</table>
@endsection

<script>
/** 
* Exibe confirmação de exclusão ao clicar no botão excluir 
* O metodo confirmation() é de um componente do bootstrap
* chamado bootstrap confirmation
**/
$('table tbody').on('click','a[id^="person-delete"]', function (e) {
    e.preventDefault();
    $(this).confirmation('show');
});

/**
* o atributo "processing" define que os dados
* da tabela poderá serão processados a cada
* requisição.
* 
* O atributo "serverSide" informa que a tabela 
* fará requisições no servidor para consultar 
* novos dados.
* 
* O atributo "ajax" define para qual rota 
* fará a requisição. Esta rota é a que contém
* o json com os dados consultados pelo model. 
*
* O atributo columns é um array com todas as colunas 
* e seus respectivos valores consultados no banco.
*
* data: 'name' é o nome da coluna na tabela
* name: 'name' é o nome do campo vindo da consulta e seu valor.
*
* O campo "action" é responsável pela criação dos botões 
* de editar e excluir a linha da tabela.
*
**/
var table = $('#people-table').DataTable({
    destroy: true,
    lengthMenu: [ 5, 10, 15, 25, 50, 100, 'Todas' ],
    responsive: true,
    processing: true,
    serverSide: true,
    ajax: "{!! route('listar') !!}",
    columns: [
        {data: 'name', name: 'name'},
        {data: 'cpf', name: 'cpf'},
        {data: 'rg', name: 'rg'},
        {data: 'phone', name: 'phone'},
        {
            "data": "action",
            "render": function(data, type, row, meta){
                return '<a href="'+ $('link[rel="base"]').attr('href') + '/editar/' + row.id +'" class="btn btn-xs btn-info" title="Editar Pessoa"> <i class="fa fa-edit"></i></a> <a href="'+ $('link[rel="base"]').attr('href') + '/excluir/' + row.id +'" id="person-'+ row.id +'" class="btn btn-xs btn-danger" data-toggle="confirmation" data-btn-ok-label="Sim" data-btn-ok-class="btn-success" data-btn-ok-icon-class="material-icons" data-btn-ok-icon-content="" data-btn-cancel-label="Não" data-btn-cancel-class="btn-danger" data-btn-cancel-icon-class="material-icons" data-btn-cancel-icon-content="" data-title="Tem certeza que deseja excluir o cadastro de '+ row.name +'?" data-content="Esta ação não poderá ser desfeita." title="Excluir Pessoa"> <i class="fa fa-trash"></i></a>';
            }
        }
        ],
    });
</script>

If you'd like to customize your table further, just refer to the dataTables documentation and the abstraction < created for laravel .

Sign if you can make it work or not!

Success!