Paginación VUEjs y LARAVEL Cálculo de páginas - Parte 3

Video Bonus número 4, vamos a continuar con la programación de la propiedad pagesNumber para obtener los números de página con cálculos dinámicos en nuestra paginación, utilizando Laravel y Vuejs.

Inicia sesión para poder registrar las lecciones que has completado Login

Continuando con la paginación.. nos encontramos en la edición de nuestro archivo javascript resources\assets\js\app.js y específicamente en la creación del código para la propiedad pagesNumber, en la cual vamos a realizar los siguientes pasos:

  1. Creamos una función if() para controlar si necesitamos, si o no un determinado número de páginas. Dentro de su condición establecemos que si no tenemos nada en su propiedad hasta (!this.pagination.to), retornamos un array vacío, es decir ningún número de página.

  2. Debajo de la condición if, declaramos una variable from que será igual a la página actual (this.pagination.current_page) menos un número que podría ser variable pero que por el momento le dejaremos estático.

  3. Creamos un nuevo if() para controlar si la resta de la variable from obtiene un número negativo se signe a esta variable el valor de 1.

  4. El siguiente paso es controlar la variable to que será igual a la variable from más la multiplicación de (2*2), ese número 2 lo vamos a colocar por ahora de forma manual pero que después cambiaremos por una variable dinámica de compensación offset.

  5. Para controlar nuestra variable “hasta” to, y que no se pase de la última página creamos un nuevo if() con la condición de que si esta variable es mayor o igual a la última página (to >= this.pagination.last_page), entonces la variable to será igual a la última página.

  6. Con todos los controles necesarios creados tenemos que calcular la numeración exacta, para esto utilizamos el bucle while() con la condición que si la variable “desde” es menor a la variable “hasta” (from < to), llenamos un array pagesArray con el valor de from que se irá sumando y añadiendo elementos hasta cumplir la condición.

  7. Al final de esta propiedad solo tenemos ya que retornar el array pagesArray con la numeración calculada.

<script>
pagesNumber: function() {
    if(!this.pagination.to){
        return [];
    }

    var from = this.pagination.current_page - this.offset; 
    if(from < 1){
        from = 1;
    }

    var to = from + (this.offset * 2); 
    if(to >= this.pagination.last_page){
        to = this.pagination.last_page;
    }

    var pagesArray = [];
    while(from <= to){
        pagesArray.push(from);
        from++;
    }
    return pagesArray;
}
</script>

 

Control de Paginación

Una vez que hemos obtenido la numeración de nuestra paginación, necesitamos un método adicional que controle el cambio de página. Al final de la sección de métodos agregamos uno más con el nombre changePage y en su función recibiremos el parámetro page con el número de la página que se desea cambiar.

A la página actual this.pagination.current_page le asignamos dicho número y llamamos al método getKeeps para que nos liste los registros de esa página.

<script>
changePage: function(page) {
    this.pagination.current_page = page;
    this.getKeeps(page);
}
</script>

Modificamos el método getKeeps creado desde el inicio de este curso, para que reciba el número de página a la que el cual usuario desea cambiar, y este se comunique con el Api para obtener la nueva información.

<script>
getKeeps: function(page) {
    var urlKeeps = 'tasks?page='+page;
    axios.get(urlKeeps).then(response => {
        this.keeps = response.data.tasks.data,
        this.pagination = response.data.pagination
    });
},
</script>

 

Modificación de Api

Nos damos cuenta que con la aplicación Vue estamos pasando parámetros get al Api, pero este aún no ha sido preparado para recibir dichos parámetros.

Para configurarlo nos dirigimos al controlador app\Http\Controllers\TaskController.php y con la ayuda de la clase Request editamos el método index() para que reciba el parámetro $request con el valor enviado desde Vue.

<?php
public function index(Request $request)
{
    $tasks = Task::orderBy('id', 'DESC')->paginate(2);
    return [
        'pagination' => [
            'total'               => $tasks->total(),
            'current_page' => $tasks->currentPage(),
            'per_page'       => $tasks->perPage(),
            'last_page'       => $tasks->lastPage(),
            'from'              => $tasks->firstItem(),
            'to'                   => $tasks->lastItem(),
        ],
        'tasks' => $tasks
    ];
}

Lo últimos que debemos hacer es preparar la vista para el diseño de la paginación utilizando toda la programación realizada hasta el momento, esto lo realizamos en el siguiente video para verlo más a detalle y evitar confusiones.

Adquiere en preventa y aprovecha un gran descuento TDD en Laravel

Comparte en

Creado por: Venezuela Italo Morales

Profesor de #Laravel y #PHP en Rimorsoft Online

Más información


Error en modificacion de datos

Hola, Estoy teniendo un error con laravel (5.7) y no le puedo encontrar la vuelta.

Mi problema:

Tengo una lista de usuarios la cual tiene 3 botones (ver, activar y eliminar) mi problema viene con el boton activar el cual activa o desactiva un usuario segun su estado ( si esta activado lo desactiva y si esta desactivado lo activa), pero cuando presiono el boton me tira ...

Como crear un array y almacenarlo en una Base de Datos

Necesito ayuda con un problema, estoy haciendo un tipo de sistema de facturación y los servicios que se van a facturar los quiero guardar en un array, luego éste array almacenarlo en una sola columna de la base de datos. No tengo mucho conocimientos de Arrays. Pero ya había trabajado en una tienda virtual y la parte del carrito la hacía así, con un array.

El punto es qu...

owen-it / laravel-auditing

saludos a la comunidad necesitaría de su ayuda con esta librería   ooowen-it / laravel-auditing para un proyecto en laravel de echo encontré material pero no me es fácil entenderlo (auditoria de usuarios este es link https://pusher.com/tutorials/realtime-audit-trail-laravel me ayudaría mucho un videotutorial gracias!...

No puedo instalar el paquete de shinobi

soy nuevo en esto , estoy viendo su curso de roles y permisos en su canal de youtube, necesito instalar el paquete de shinobi pero no se puede, me sale lo siguiente:

Problem 1 - Installation request for caffeinated/shinobi ^3.3 -> satisfiable by caffeinated/shinobi[v3.3]. - Conclusion: remove laravel/framework v5.8.4 - Conclusion: don't install laravel/fr...