I have a form where I display a table with data to assist the employee in creating the contract, this table is being paged:
($seguranças = DB::table('Segurança')
->where('disponibilidade', '=', 'disponível')
->orderBy('name', 'asc')
->Paginate(15);))
When clicking on the page, rendering to the other pages all the data already filled in form are deleted, how can I solve this problem?
You can use dataTables.
However, there is an abstraction of the same for laravel.
I will write a tutorial on how to implement it very simply and quickly, but without addressing all the technical aspects.
However, there are other right ways to do in documentation , just check it out.
Follow the project on GitHub link
Follow the link link
Follow the DataTables documentation 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!