Você pode utilizar o dataTables.
Contudo, existe uma abstração do mesmo para o laravel.
Vou escrever um tutorial de como implementei de maneira bem simples e rápida, mas sem abordar todos os aspectos técnicos.
Contudo, há outras formas mais corretas de fazer na documentação, basta consultar.
Segue o projeto no GitHub https://github.com/yajra/laravel-datatables
Segue o link da documentação https://yajrabox.com/docs/laravel-datatables
Segue o link da documentação do DataTables https://datatables.net/
Obs: Neste exato momento que estou escrevendo o tutorial, identifiquei que o site da documentação está fora do ar.
Vamos lá.
Siga os procedimentos de instalação descritos no github, após isso siga os passos abaixo:
No arquivo routes/web.php adicione a seguinte rota:
Route::get('/pagina/listar', 'ControllerAqui@listar')->name('listar');
Ela será responsável por recuperar os dados que serão exibidos na tabela.
Em seguida, vá até seu controller e implemente um método parecido com este:
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);
}
Isso já garante que um json seja retornado ao acessar a rota definida.
Após isso, crie uma view com o seguinte conteúdo
@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>
Caso queira customizar ainda mais sua tabela, basta consultar a documentação do dataTables e a documentação da abstração criada para o laravel.
Sinalize caso consiga fazer funcionar ou não!
Sucesso!
laravel
?