Laravel Livewire Ordenación por columnas en las tablas - Datatable
En este capítulo, vamos a trabajar en ordenación de columnas de manera individual y ascendente/descendente en el listado.
El esquema que vamos a seguir, para poder ordenar fácilmente todas las columnas de un listado, es definiendo las columnas que vamos a mostrar en el listado a nivel de una propiedad en el componente de Livewire; con esto, podremos fácilmente indicar los eventos clicks en base a la estructura propuesta en este libro:
app/Http/Livewire/Dashboard/Post/Index.php
class Index extends Component
{
use WithPagination;
// ***
// order
public $sortColumn = 'id';
public $sortDirection = 'desc';
public $columns = [
'id' => "Id",
'title' => "Title",
'date' => "Date ",
'description' => "Description",
'posted' => "Posted",
'type' => "Type",
'category_id' => "Category",
];
public function render()
{
//$this->confirmingDeletePost = true;
$posts = Post::orderBy($this->sortColumn,$this->sortDirection);
if ($this->search)
// ***
}
// order
public function sort($column)
{
$this->sortColumn = $column;
$this->sortDirection = $this->sortDirection == 'asc' ? 'desc' : 'asc';
}Explicación del código anterior
La columna de $columns definimos las columnas que vamos a mostrar en el listado, como; por ejemplo:
'id' => "Id",Como key del array, indicamos el nombre de la columna en la base de datos (el nombre de la propiedad en el modelo).
Como valor, es el label o texto que vamos a colocar como cabecera en la tabla.
Las propiedades de $sortColumn y $sortDirection definen la columna que vamos a ordenar en un momento dado y el tipo (ascendente o descendente), respectivamente.
Los cuales actualizamos a nivel del método llamada sort() la cual permite actualizar la columna de ordenación y el tipo; claro está, esta función será la que es consumida desde la vista mediante un wire:click.
En la vista:
resources/views/livewire/dashboard/post/index.blade.php
***
<table class="table w-full border">
<thead class="text-left bg-gray-100 ">
<tr class="border-b">
@foreach ($columns as $key => $c)
<th>
<button wire:click="sort('{{ $key }}')">
{{ $c }}
@if ($key == $sortColumn)
@if ($sortDirection == 'asc')
↑
@else
↓
@endif
@endif
</button>
</th>
@endforeach
<th class="p-2">
Actions
</th>
</tr>
</thead>
***Transcripción del vídeo
Comencemos definiendo aquí arriba la propiedad para definir cada una de las columnas tal cual te explicaba antes entonces colocamos colums va a ser igual es importante otra vez aquí tienes que colocar el nombre de la columna en este caso es ID que es el primer campo que voy a colocar y este sería el Label puede tener cualquier otro que tú quieras identification colocarle simplemente ID el siguiente sería title intenta para que sea más fácil que sea exactamente en el orden en el cual aparecen en el listado:
public $sortColumn = 'id';
public $sortDirection = 'desc';***
<table class="table w-full border">
<thead class="text-left bg-gray-100 ">
<tr class="border-b">
@foreach ($columns as $key => $c)
<th>
<button wire:click="sort('{{ $key }}')">
{{ $c }}
@if ($key == $sortColumn)
@if ($sortDirection == 'asc')
↑
@else
↓
@endif
@endif
</button>
</th>
@endforeach
<th class="p-2">
Actions
</th>
</tr>
</thead>
***Las siguientes propiedades a definir serian la de direction y columna:
public $columns = [
'id' => "Id",
'title' => "Title",
'date' => "Date ",
'description' => "Description",
'posted' => "Posted",
'type' => "Type",
'category_id' => "Category",
];Con las cuales se especifica la dirección, si es ascendente o descendente y la columna.
En la función de render en el método de render aplicaríamos la ordenación aquí lo dejé utilizando el sería colocarlo por acá aquí hay un paso importante que no están inicializadas entonces tuviéramos la dirección aquí, es decir, si es ascendente o descendente.
Nos faltaría ahora es definir los campos en la tabla así que bueno tienes que quitar todo esto sin el de acciones porque eso no está definido y tampoco es una columna por la cual vayamos a filtrar lo quitas lo remueves yo lo voy a dejar comentado ahí para que lo tengas de referencia y venimos aquí con la parte del for each before each y definimos las columnas en el TR:
El siguiente paso sería el de dirección que como te indicaba lo hacemos desde acá directamente direction va a ser igual a direction indicamos que si esto es igual igual ascendente entonces aquí hacemos el to otra vez aquí estamos comparando que sea igual igual ascendente Entonces como estamos llamando est o este método lo invertimos y colocamos que va a ser descendente caso contrario colocamos que es ascendente de igual manera ahorita que lo ve funcionar en caso de que todavía no lo ubiques bien vas a ver cómo funciona y eso sería prácticamente todo:
public function sort($column)
{
$this->sortColumn = $column;
$this->sortDirection = $this->sortDirection == 'asc' ? 'desc' : 'asc';
}- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter