I brought this doubt because I already rode everything and I did not succeed. I have a project with laravel and for front I am using vue.
The project already searches for filtering and ordering by the fields, however the pagination was not successful. Among many tutorials, documents and videos, I tried to use one of these two components:
Someone who has been able to use it, could tell me where I'm going wrong? In the code below, I try to use the first component that is most functional.
Thanks in advance for the help.
blade.php
<example-component :arquivoftp="'{{ $arquivoFtp }}'"></example-component>
app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import vPage from 'v-page';
Vue.use(vPage, {
language: 'en',
pageSizeMenu: [20, 100],
totalRow: 200,
});
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
ExampleComponent.vue
<script>
export default {
props: ["arquivoftp"],
data() {
return {
list: [],
colunaSort: "nome", //Coluna padrão para ordernar
colunaOrder: "asc", //Opção de ascendente ou descendente, padrão inicia como asc
busca: ""
};
},
mounted() {
this.list = JSON.parse(this.arquivoftp);
},
methods: {
// Metodo que define qual a coluna que será ordernada e se é ascendente ou descendente
sort: function(coluna) {
// Se é a mesma coluna que está setando, então vai inverter a orderm de exibição
if (this.colunaSort == coluna) {
this.colunaOrder = this.colunaOrder == "asc" ? "desc" : "asc";
// Se é uma coluna diferente, seta a coluna e define como ascendente
} else {
this.colunaSort = coluna;
this.colunaOrder = "desc";
}
},
//receive page info change callback
pageChange(pInfo){
console.log(pInfo);//{pageNumber: 1, pageSize: 10}
}
},
computed: {
// Metódo que faz o sort das colunas, definindo o nome da coluna e a ordem e a busca dos campos
buscarOrdenado: function() {
var ordenado = _.orderBy(this.list, this.colunaSort, this.colunaOrder);
var self = this;
return _.filter(ordenado, function(arquivo) {
var busca = self.busca.toLowerCase();
// Condição modifica o valor retornado do bd para impressão na view e permite a busca da mesma pelo texto
if (arquivo.verificado == 1 || arquivo.verificado == "Verificado") {
arquivo.verificado = "Verificado";
} else {
arquivo.verificado = "Não";
}
// Campos que podem ser pesquisados(filtrados)
return (
arquivo.nome.toLowerCase().indexOf(busca) >= 0 ||
arquivo.verificado.toLowerCase().indexOf(busca) >= 0
);
});
}
}
};
</script>
<template>
<div>
<table class="table table-sm table-striped table-hover">
<thead>
<tr>
<td>
<input
type="text"
class="form-control"
placeholder="Buscar em todos os campos"
v-model="busca"
>
</td>
</tr>
<tr>
<th>
<a href="#" v-on:click.prevent="sort('nome')">Nome</a>
</th>
<th>Selecionar</th>
<th>
<a href="#" v-on:click.prevent="sort('verificado')">Verificado</a>
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(arquivo, index) in buscarOrdenado">
<td v-if="arquivo.nome.includes('.xml') == true">{{ arquivo.nome }}</td>
<td v-else>
<a
:href="'http://localhost/'+arquivo.ftp_origem+'/'+arquivo.nome"
>{{arquivo.nome}} [ CLIQUE PARA VISUALIZAR ]</a>
</td>
<td v-if="arquivo.nome.includes('.xml') == true">
<input type="checkbox" name="nome_arquivo[]" :value="arquivo.nome">
</td>
<td v-else></td>
<td v-if="arquivo.nome.includes('.xml') == false"></td>
<td v-else-if="arquivo.verificado == 'Não'">
<font color="red">{{ arquivo.verificado }}</font>
</td>
<td v-else>{{ arquivo.verificado }}</td>
<td>{{ index }}</td>
</tr>
<tr>
<!-- v-bind 'setting' data to config page bar -->
<!-- bind event 'page-change' to receive page info change -->
<v-page :setting="pageSet" @page-change="pageChange"></v-page>
</tr>
</tbody>
</table>
</div>
</template>