7

Tengo una tabla paginada, también tengo una funcion js para filtrar datos; solo que los datos se filtran en la pagina actual y no en todos los datos introducir la descripción de la imagen aquí

esta es la vista:

<table class="table table-hover table-striped table-bordered" id="MyTable">
                <thead>
                    <tr>
                        <th>DNI</th>
                        <th>Apellidos y Nombres</th>
                        <th colspan="3"><center>Acciones</center></th>
                    </tr>
                    <tr>
                      <td colspan="5">
                        <input id="buscar" type="text" class="form-control" placeholder="Escriba algo para filtrar" />
                      </td>
                    </tr>
                </thead>
                <tbody>
                     <tr v-for="persona in personas">
                         <td width="10px">@{{ persona.PERS_varDNI}}</td>
                         <td>@{{ persona.PERS_varApPaterno}} @{{ persona.PERS_varApMaterno}}, @{{ persona.PERS_varNombres}}</td>
                         <td width="10px">
                             <a href="#" class="btn btn-primary btn-sm">Agregar contrato</a>                
                         </td>
                         <td width="10px">
                             <a href="#" class="btn btn-warning btn-sm" v-on:click.prevent="editPersona(persona)">Editar</a>                
                         </td>
                         <td width="10px">
                             <a href="#" class="btn btn-danger btn-sm" v-on:click.prevent="deletePersonas(persona.PERS_varDNI)">Eliminar</a>
                         </td>
                     </tr>    
                </tbody>                
            </table>
            <nav>
                <ul class="pagination">
                    <li v-if="pagination.current_page > 1">
                        <a href="#" @click.prevent="changePage(pagination.current_page - 1)">
                            <span>Atras</span>
                        </a>
                    </li>

                    <li v-for="page in pagesNumber" v-bind:class="[ page == isActived ? 'active':'']">
                        <a href="#" @click.prevent="changePage(page)">
                            @{{ page }}
                        </a>
                    </li>

                    <li v-if="pagination.current_page < pagination.last_page">
                        <a href="#" @click.prevent="changePage(pagination.current_page + 1)">
                            <span>Siguiente</span>
                        </a>
                    </li>
                </ul>
            </nav>

el js es:

<script type="text/javascript">
    var busqueda = document.getElementById('buscar');
    var table = document.getElementById("MyTable").tBodies[0];

    buscaTabla = function(){
      texto = busqueda.value.toLowerCase();
      var r=0;
      while(row = table.rows[r++])
      {
        if ( row.innerText.toLowerCase().indexOf(texto) !== -1 )
          row.style.display = null;
        else
          row.style.display = 'none';
      }
    }

    busqueda.addEventListener('keyup', buscaTabla);
</script>

las funciones en vuejs son:

getPersonas:function(page){
            var urlPersona='personas?page='+page;
            axios.get(urlPersona).then(response=>{
                this.personas=response.data.personas.data,
                this.pagination=response.data.pagination
            });
        },
changePage: function(page){

            this.pagination.current_page = page;
            this.getPersonas(page);            
        }

y el controlador para recuperar los datos:

public function index(Request $request)
    {
        //
        $personas=\DB::table('personas')->paginate(10);
        return [
            'pagination' => [
                'total' => $personas->total(),
                'current_page' => $personas->currentPage(),
                'per_page' => $personas->perPage(),
                'last_page' => $personas->lastPage(),
                'from' => $personas->firstItem(),
                'to' => $personas->lastItem(),
            ],
            'personas' => $personas
        ];
    }

el filtro solo sirve en la pagina actual, necesito que se filtre en todas las paginas

10
  • Se me ocurren dos ideas, una es que uses 'visibility' de vue.js para controlar que tr's se desplegan. La otra es usar un plugin como dataTables.net para controlar la paginacion y la busqueda.
    – alanfcm
    el 2 abr. 2018 a las 17:56
  • @alanfcm intente usar datatable pero no reconocen los datos desde vuejs, la tabla me aparecia sin datos
    – hans
    el 2 abr. 2018 a las 20:09
  • Para que funcione tienes que hacer un component que envuelva dataTables. Sino puedes buscar por un plugin ya existente de dataTables para vue.js. La otra opcion es como sugiere Neli Lopez, puedes controlar la visibilidad usando v-if.
    – alanfcm
    el 2 abr. 2018 a las 20:37
  • ¿qué debería pasar si al filtrar alguna página queda con 0 resultados? Por ejemplo la página 2.
    – Shaz
    el 4 abr. 2018 a las 18:22
  • Si ningún elemento de la tabla es igual al filtro, debería mostrar la tabla vacía, pero si hay 20 elementos similares y la paginación esta cada 10 elementos debería mostrar 2 paginas @Shaz
    – hans
    el 5 abr. 2018 a las 14:03

2 respuestas 2

1

tuve esta misma situación con una biblioteca de libros, puedes aplicar un v-if y utilizar dos controladores, cuando hagas una busqueda podrías traer datos de la API utilizando otro controlador que te traiga todos los registros y utilizar prototype filter de Javascript, o puedes crear una consulta utilizando un LIKE de javascript. ejemplo:

    <div v-if="esVisible">Contenido por página</div>
    <div v-else>Todo el contenido</div>

como te comentaba con filter, será más elegante, cuando realizen las busquedas, pero será mayor la carga en el cliente y tal vez a la larga no te resulte.

1

Tengo una pequeña solución, aunque solo sirve en 1 pagina:

<script type="text/javascript">
    var busqueda = document.getElementById('buscar');
    var table = document.getElementById("MyTable").tBodies[0];
    buscaTabla = function(){
      texto = busqueda.value.toLowerCase();
      var r=0;
      while(row = table.rows[r++])
      {
        if ( row.innerText.toLowerCase().indexOf(texto) !== -1 )
          row.style.display = null;
        else
          row.style.display = 'none';
      }
    }

    busqueda.addEventListener('keyup', buscaTabla);       
</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.