Paginación y búsqueda

Saludos, quería preguntarle para agregar un search con paginación que puedo hacer ? es para un data-table ya que si busco un ítem que este fuera de digamos: Laravel paginate(5), no lo encuentra solo busca en esos 5, que puedo hacer , ya que en ningún curso encuentro como buscar con paginación, hacen la paginación pero no la búsqueda, y es muy necesario en un data-table donde no quiero traer todos los datos, si no con una paginación y con un search, estoy usando Vue.js, Vuetify y Laravel, muchas gracias.

Jorge Davila (838 xp)ene 07, 2020

Depende de donde deseas implementarlo. Hay componentes ya creados de datatables que te convendria usar para no desarrollar todo. El search lo puedes hacer en backend, creando queries dinamicas o en su defecto en frontend, normalemente hecho con selectores.
Te recomiendo que revises alguna de estas librerias a ver si alguna te sirve:

https://madewithvuejs.com/blog/best-vue-js-datatables

Respecto a la paginacion prefiero dejarla al front end. Hacer esto en vue es bastante sencillo,
A tu arreglo de datos simplemente le haces un slice para obtener de dicho array el numero de registros que necesitas dependiendo de la pagina. Normalmente estos plugins ya lo tienen desarrollado asi que no debes preocuparte, sin embargo si no te funciona ninguno puedes contestar aqui e intentaremos ayudarte con ese desarrollo. Solo recuerda que es mejor no reinventar la rueda.

Brandon (116 xp)ene 07, 2020

Saludos Jorge gracias por tu respuesta, te comento de parte del back end ya lo estoy paginando con Laravel y respondo un JSON.

Laravel controlador:

        $pendienteasignados = Helpdesk::select('helpdesks.id as id', 'helpdesks.created_at as creado', 'helpdesks.Requerimiento as tipo',
        'subareas_help.Nombre as subarea', 'areas_help.Nombre as area', 'estados.Nombre as estado', 'helpdesks.Sede as sede',
        'categorias_help.Nombre as categoria', 'helpdesks.Asunto as asunto', 'helpdesks.Descripcion as descripcion')
        ->join('subareas_help', 'helpdesks.Subarea_id', 'subareas_help.id')
        ->join('areas_help', 'subareas_help.Area_id', 'areas_help.id')
        ->leftjoin('categorias_help', 'helpdesks.Categoria_id', 'categorias_help.id')
        ->join('estados', 'helpdesks.Estado_id', 'estados.id')
        ->with(['Adjuntos_helpdesks' => function ($query) {
            $query->select('Ruta','Helpdesk_id')
                ->get();
        }])
        ->whereIn('areas_help.Permission_id', $permisos )
        ->where('Estado_id', 18)
        ->paginate(3);

        return response()->json($pendienteasignados, 201);

Y lo recibo en el front end con Vue.js por medio de axios:

getPendientes() {
                axios.get('/api/helpdesk/pendientesasignado')
                    .then(res => {
                        this.allPendientes = res.data;
                    });
            },

Lo que me da como resultado:

current_page: 1
data: Array(3)
first_page_url: (...)
from: 1
last_page: 3
last_page_url: (...)
next_page_url: (...)
path: (...)
per_page: 3
prev_page_url: (...)
to: 3
total: 7

Y la muestro en el Html con Vuetify en un data table, pero solo me muestra esos 3 que pagine, igual si logro que me traiga todos paginados deja de funcionar el buscador y solo busca en la primera pagina.

Codigo Html Vuetify :

<v-card>
                    <v-card-title>
                        <v-spacer></v-spacer>
                        <v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details>
                        </v-text-field>
                    </v-card-title>
                    <v-data-table :headers="headerspendientes" :items="allPendientes.data" :search="search">
                        <template v-slot:items="props">
                            <td>{{ props.item.id }}</td>
                            <td>{{ props.item.creado.split(' ')[0] }}</td>
                            <td>{{ props.item.tipo }}</td>
                            <td>{{ props.item.area }}</td>
                            <td>{{ props.item.subarea }}</td>
                            <td>{{ props.item.estado }}</td>
                            <td>
                                <v-btn color="primary" @click="accionesPendientes(props.item)">Acciones</v-btn>
                            </td>
                        </template>
                        <template v-slot:no-results>
                            <v-alert :value="true" color="error" icon="warning">
                                Su búsqueda de "{{ search }}" no encontró resultados.
                            </v-alert>
                        </template>
                    </v-data-table>
                </v-card>

Te dejo la imagen de como se ve: https://i.ibb.co/fFLdhmT/Sin-t-tulo.png

Te agradecería mucho si me pudieras ayudar, saludos y muchas gracias de antemano.