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


envio de mail desde el propio mail de usuario autentificado

hola, como puedo enviar los mails desde laravel, pero obteniendo el mail del usuario autentificado y que se envie con el correo electronico de este? Es decir, que si el mail de user autentificado es nada@nada.es, el mail salga desde laravel enviado a traves de esa direccion de correo electronico..gracias...

Como instalar el ckeditor en vuejs?

https://github.com/dangvanthanh/vue-ckeditor2...

Como insertar una imagen en un reporte con Laravel Excel maatwebsite

Necesito ayuda con un reporte que estoy haciendo: para empezar requiero de que mi reporte en excel tenga el logo de la empresa en la parte superior de el reporte, luego tambien nesecito que algunos graficos que genero se muestren en imagen dentro del reporte. ya he tengo reportes con multiples hojas y diversos estilos. lo unico que me faltaria seria poner una o varias imagene...

agregar una columna originada de una variable a un select para hacer un insert

/en php -mysql/ /esto funciona con php , pero no logro hacerlo en laravel query builder/