0

Possuo um formulário onde exibo uma tabela com dados para auxiliar o funcionário na criação do contrato, essa tabela está sendo paginada:

($seguranças = DB::table('Segurança')
                 ->where('disponibilidade', '=', 'disponível')
                 ->orderBy('name', 'asc')
                 ->Paginate(15);))

Sendo que ao clicar na paginação, renderizando para a outra páginas todos os dados já preenchidos no form são apagados, como posso resolver esse problema?

2
  • qual versão exata do laravel? 4/11/2016 às 13:32
  • quer fazer paginação sem refresh, com ajax? (é isso???)
    – novic
    5/11/2016 às 15:41

1 Resposta 1

1

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!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .