ERRO REACT == PAGINAÇÃO EM API EXTERNA

Por favor preciso de ajuda para fazer uma paginação dos resultados de informações em uma API externa (pokeapi.co) consigo buscar todos os itens, limitei as respostas em cem unidades e agora quero paginar em dez em dez por páginas, mas apresenta o seguinte erro, quando clico nos links da paginação para mudar de paginas e os itens ainda não aparecem como paginados. Erro abaixo:

this.setState is not a function na linha 21 do código que listo abaixo:

     import React, { Component } from 'react';     import axios from 'axios';     import Pagination from 'react-js-pagination';     import PokemonCard from './PokemonCard';      require ('bootstrap-less/bootstrap/bootstrap.less');      export default class PolemonList extends Component {      constructor(props) {      super(props);      this.state = {       activePage: 1,       pageNumber: 10     };    }      handlePageChange(pageNumber) {     console.log(`active page is $  {pageNumber}`);     this.setState({activePage: pageNumber});   }    state = {     url: 'https://pokeapi.co/api/v2/pokemon/?offset=0&limit=100',     pokemon: null   };    async componentDidMount() {     const res = await axios.get('https://pokeapi.co/api/v2/pokemon/?offset=0&limit=100');     this.setState({ pokemon: res.data['results'] })   }    render() {     return(       <React.Fragment>         {this.state.pokemon ? (           <div className="row">             {this.state.pokemon.map(pokemon => (               <PokemonCard                 key={pokemon.name}                 name={pokemon.name}                 url={pokemon.url}               />               ))}           </div>         ) : (               <h2>Loading Pokemon</h2>         )}         <hr></hr>         <div className="row">           <div className="col-12 text-center">             <Pagination               activePage={this.state.activePage}               itemsCountPerPage={8}               totalItemsCount={100}               pageRangeDisplayed={10}               onChange={this.handlePageChange}             />           </div>         </div>       </React.Fragment>     );   } } 

Por favor alguém pode me ajudar? Agradeço antecipadamente.

Paginação e Pesquisa – SpringData com SQLServer2008

Olá, estou com um problema na minha aplicação e queria ver se alguém aqui pode me auxiliar.

Estou desenvolvendo um sistema com SpringBoot (SpringData, etc..) em cima de uma base SQLServer2008. Devido a força maior, foi necessário a implementação de um datatable que permita a paginação, e o filtro em multiplas colunas (vide anexo).

datatable-com-paginação

O que ocorre é que, quanto estou em uma página que não seja a primeira, e pesquiso na coluna por um valor os dados são inconsistêntes, deixa eu explicar.

O que ocorre é que, devido a maneira que o filtro está sendo aplicado na consulta a base de dados, os valores que vierem filtrados em uma “página” diferente da atual (ex: 2) não são mostrados. Desenhando..:

Caso tenha um dataset tal qual:

  • joão
  • mário

Se eu estiver paginando meu datatable com tamanho 1, e for para a segunda página, onde será mostrado o resultado mário e filtrar por joão, não consigo obter o resultado, pois a query “supõe” que o resultado deverá estar na segunda página do dataset.

Espero que tenha sido claro o suficiente.. 😀

De implementação, estou utilizando o Pageable e Specification do SpringData. Códigos relevantes:

public class UsuarioRestController {     private final UsuarioService usuarioService;     public Page<UsuarioListModel> listarUsuarios(@PageableDefault Pageable pageable, @Validated UsuarioSearchCriteria usuarioSearchCriteria) {         return usuarioService.buscaPaginado(usuarioSearchCriteria, pageable)                 .map(UsuarioListModel::new);     } }  public class UsuarioService {     private final UsuarioRepository repository;     public Page<Usuario> buscaPaginado(UsuarioSearchCriteria criteria, Pageable pageable) {         return repository.findAll(criteria.getSpecification(), pageable);     } }  public class UsuarioSearchCriteria {     private Long codigo;     private String nome;     private Boolean habilitado;     public Specification<Usuario> getSpecification() {         return Specification                 .where(UsuarioSpecifications.codigo(codigo))                 .and(UsuarioSpecifications.nomeLike(nome))                 .and(UsuarioSpecifications.habilitado(habilitado));     } }  class UsuarioSpecifications {     static Specification<Usuario> codigo(Long codigo) {         if (codigo == null) return null;         return (root, query, cb) -> cb.equal(root.get("codigo"), codigo);     }      static Specification<Usuario> nomeLike(String nome) {         if (nome == null) return null;         return (root, query, cb) -> cb.like(root.get("nome"), "%" + nome + "%");     }      static Specification<Usuario> habilitado(Boolean habilitado) {         if (habilitado == null) return null;         return (root, query, cb) -> cb.equal(root.get("habilitado"), habilitado);     } }  public interface UsuarioRepository extends JpaRepository<Usuario, Long>, JpaSpecificationExecutor<Usuario> {     Optional<Usuario> findByCodigo(Long codigo);     Boolean existsByCodigo(Long codigo); } 

Pontos importantes:

  • Já testei tanto com Hibernate quanto com Eclipselink, o problema persiste.
  • Sei que o SQLServer2008 não possui um bom suporte a paginação (eg, offset), e isto muito possívelmente é o meu problema.
  • Não tenho a possibilidade de trocar de SGBD infelizmente.

De qualquer forma, se alguém tiver alguma ideia, ou saiba uma solução, por favor! :help

Como faço para saber se a paginação foi clicada no laravel?

pessoal estou com um problema preciso enviar um parâmetro de uma view para outra até beleza está funcionando porém estou tendo problemas na paginação pois ele dá erro nesse parâmetro que preciso enviar, para resolver isso preciso deixar esse parâmetro nulo porém para isso teria que verificar se pagina foi clicada tem como saber isso segue meus código do controller abaixo:

public function index(Request $ request) {
$ search = $ request->get(‘search’); $ btn = $ request->query();

    $  products = DB::table('products')->when($  search , function ($  query) use ($  search ) {                     return $  query->where('name', 'like', '%'. $  search .'%' )                             ->orWhere('detalhe', 'like', '%'. $  search .'%')                             ->orWhere('id', 'like', '%'.$  search.'%');                 })->paginate(5);       return view('products.index', compact('products','btn'))             ->with('i', (request()->input('page', 1) -1)* 5);      //dd($  btn); 

// $ products = Product::latest()->paginate(5); //
// return view(‘products.index’, compact(‘products’,’btn’)) // ->with(‘i’, (request()->input(‘page’, 1) -1)* 5); }

uma coisa que poderia servir é capturar a page atual, alguém sabe como fazer isso?

Como fazer paginação sem perder o filtro em vuejs

Sou iniciante em vuejs e Eu tenho uma lista sendo renderizada que está com a paginação de 20 items. Tambem tenho 3 tipos de filtros. Um filtro tras todos os dados e os outros dois tem seus criterios. Tenho tambem um botão “carregar mais” que tras mais 20 items, o problema é que quando eu uso o botão “carregar mais” ele perde o filtro, como faço para continuar filtrando?

   <template>   <div class="properties">         <v-btn       @click="propertyFilterKey = 'all'"       :class="{ active: propertyFilterKey == 'all' }"     >       Todos     </v-btn>     <v-btn       @click="propertyFilterKey = 'op1'"       :class="{ active: propertyFilterKey == 'op1' }"     >       op1     </v-btn>     <v-btn       @click="propertyFilterKey = 'op2'"       :class="{ active: propertyFilterKey == 'op2' }"     >       Viva Real     </v-btn>     <ul v-for="(property, i) in propertyFilter" :key="`$  {i}-$  {property.id}`">       <li>         <PropertyItem :property="property" />       </li>     </ul>      <div class="load-more">       <v-btn         color="info"         v-if="loadMore"         class="load-more"         @click="getProperties"       >         <v-icon>cached</v-icon>Carregar Mais        </v-btn>     </div>   </div> </template>  <script> import PropertyItem from "./PropertyItem";  export default {   name: "Property",   components: { PropertyItem },   data() {     return {       properties: [], //       loading: true,       errored: false,       lazyImage: "http://v.fastcdn.co/u/3854b641/30803296-0-imagem-share.jpg",        page: 1,       loadMore: true,       limit: 20,        propertyFilterKey: "all"     };   },    methods: {     getProperties() {       console.log(this.$  route.params.id);       this.$  http         .get(`properties?_page=$  {this.page}&_limit=$  {this.limit}`)         .then(res => {           this.properties = this.properties.concat(res.data);           this.page++;            if (res.data.length === 0) this.loadMore = false;           console.log(this.properties);           console.clear();         });     }   },   mounted() {     // this.properties.id = this.$  route.params.id;     this.getProperties();   },   watch: {     $  route(to) {       this.properties.id = to.params.id;       // this.properties = [];       this.page = 1;       this.loadMore = true;       console.clear();        // this.getProperties();     }   },   computed: {     eligible() {       return this.properties.filter(p => {         const { lat, lon } = p.address.geoLocation.location;         return Math.min(lat, lon) !== 0;       });     },     propertyFilter() {       return this[this.propertyFilterKey];     },     op1() {       console.log("op1");       return this.properties.filter(p => {         const { rentalTotalPrice, businessType, price } = p.pricingInfos;         const { lat, lon } = p.address.geoLocation.location;          if (           Math.min(lat, lon) !== 0 &&           businessType === "RENTAL" &&           rentalTotalPrice >= 3500         )           return true;          if (           Math.min(lat, lon) !== 0 &&           businessType === "SALE" &&           price >= 600000         )           return true;          if (           Math.min(lat, lon) !== 0 &&           businessType === "SALE" &&           p.usableAreas > 0 &&           lon > -46693419 &&           lon < -46641146 &&           lat > -23.568704 &&           lat < -23.546686 &&           p.usableAreas / price > 3150         )           return true;          if (           Math.min(lat, lon) !== 0 &&           businessType === "SALE" &&           p.usableAreas > 0 &&           p.usableAreas / price > 3500         )           return true;         console.log(p);       });     },     op2() {       console.log("viva real");       return this.properties.filter(p => {         const { rentalTotalPrice, businessType, price } = p.pricingInfos;         const { lat, lon } = p.address.geoLocation.location;         if (           (Math.min(lat, lon) !== 0 &&             businessType === "RENTAL" &&             rentalTotalPrice <= 4000) ||           (Math.min(lat, lon) !== 0 &&             businessType === "SALE" &&             price <= 700000)         )           return true;         console.log(p);       });     },     all() {       return this.properties.filter(p => {         const { lat, lon } = p.address.geoLocation.location;         return Math.min(lat, lon) !== 0;       });     }   } }; </script> 

Paginação dentro de uma div

Estou a criar paginação dentro de uma div e pretendo que de página em página retorne 5 em 5 linhas, mas não está a funcionar, quando clico para abrir a segunda página não retorna 5 linhas diferentes, só altera a primeira e a última como mostro na imagem:

nesta imagem retorna as primeiras 5 linhas: inserir a descrição da imagem aqui

nesta imagem retorna quando clico para abrir a pagina 2, onde só altera em relação à anterior a última linha e retira a primeira linha da página anterior: inserir a descrição da imagem aqui

Código:

<?php require("conexao.php"); require("init.php");  $  itens_por_pagina1 = 5;  $  pagina1 = intval($  _GET['pagina1']);  $  query1 = "SELECT * FROM raddb.Grupo ORDER BY Discricao ASC LIMIT $  pagina1, $  itens_por_pagina1";  $  result1 = $  conn->query($  query1) or die($  conn->error);  $  produto1 = $  result1->fetch_assoc();  $  num1 = $  result1->num_rows;  $  num_total1 = $  conn->query("SELECT * FROM raddb.Grupo ORDER BY Discricao ASC")->num_rows;  $  num_paginas1 = ceil($  num_total1/$  itens_por_pagina1);  <div class="table-responsive" id="employee_table1">   <?php if($  num1 > 0){ ?>  <table class="table table-hover table-striped lista-clientes1">   <legend><b>Grupos</b></legend> <tr>  <span class="glyphicon glyphicon-filter" data-toggle="modal" data-original-title="Filter"></span><input type="text" class="input-search1" alt="lista-clientes1"/> <th width="25%">Grupo</th> <th width="30%">Ações</th>                                   </tr>   <?php  do{ ?>  <tr>   <td><?php echo $  produto1["Discricao"]; ?></td>   <td><button type="button" name="view1" id="<?php echo $  produto1["Id"]; ?>" data-toggle="modal" href="#dataModal1" class="btn btn-warning btn-sm view_data1" /><span class="glyphicon glyphicon-edit"></span></button></td> </tr>   <?php } while($  produto1 = $  result1->fetch_assoc()); ?>  </table>  <nav> <ul class="pagination"> <li> <a href="index.php/novoutilizador?pagina1=0" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <?php  for($  i=0;$  i<$  num_paginas1;$  i++){ $  estilo = ""; if($  pagina1 == $  i) $  estilo = "class=\"active\""; ?> <li <?php echo $  estilo; ?> ><a href="index.php/novoutilizador?pagina1=<?php echo $  i; ?>"><?php echo $  i+1; ?></a></li> <?php } ?> <li> <a href="index.php/novoutilizador?pagina1=<?php echo $  num_paginas1-1; ?>" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav> <?php } ?> </div>  </div>  

PHP/MYSQL – Inserir paginação no código de busca

boa noite. Estou fazendo um site que faça pesquisa de palavras fora de ordem, para que as pessoas pesquisem sem a necessidade de digitar a palavra corretamente. Exemplo: Nome no Banco de dados: “Jose Marcos da Silva” como o usuário poderá pesquisar com esse código abaixo: “Jose Silva” ou “Jose Marcos Silva“. Eu encontrei esse trecho de código aqui no Stack. Eu preciso fazer uma paginação mas não estou conseguindo introduzir nesse código, por favor, tem como alguém me auxiliar em como fazer ou até mesmo melhorar esse código?

<?php // A busca // Salva o que foi buscado em uma variável $  pesquisa = str_replace( array( ',', '.', '%', '-', '/', '\' ),' ', $  _GET['consulta'] ); // Usa a função mysql_real_escape_string() para evitar erros no MySQL $  pesquisa = mysql_real_escape_string($  pesquisa); $  palavras = explode( ' ', $  pesquisa ); // dividindo as palavras pelo espaço $  palavras = array_filter($  palavras); // eliminando ítens vazios  // Monta a consulta  $  sql = 'SELECT * FROM artigos '; $  cola = 'WHERE ';  //Aqui você pode juntar vários campos no concat. $  campo = 'CONCAT( titulo, " ", resumo)';  foreach ($  palavras as $  palavra) { $  palavra = trim($  palavra); //Removendo espaços em branco $  palavra = mysql_real_escape_string($  palavra); //Precisa da conexão com o banco! $  sql .= $  cola.campo.' LIKE "%'.$  palavra.'%" '; $  cola = 'AND '; } // Executa a consulta $  query = mysql_query($  sql);  // Mostra resultados echo "<ul>"; while ($  resultado = mysql_fetch_assoc($  query)) { $  titulo = $  resultado['titulo']; $  resumo = $  resultado['resumo']; $  link = 'http://meusite.com.br/artigos/' . $  resultado['link']; echo "<li>"; echo '<a href="'.$  link.'" title="'.$  titulo.'">'.$  titulo.'</a><br />'; echo "<p>"; echo '<p>'.$  resumo.'</p>'; echo "</li>"; } echo "</ul>";  ?>

Paginação com Filtros usando CodeIgniter

Tenho uma consulta com filtros vindo de um formulário. Até ai tudo certo, a consulta é executada corretamente, o caculo de páginas também. O formulário envia via método POST. Ao navegar entre as páginas geradas pelo resultado, por exemplo, segunda página, como a paginação é get e os parâmetros não foram passados para url está dando erro para exibir os resultados a partir da página 2. Gostaria de saber uma boa forma da paginação no codeigniter para resolver essa questão e passar os parâmetros ao selecionar o número da página! Grato.

Laravel Vue Paginação

Trouxe esta dúvida porque já rodei tudo e não tive sucesso. Tenho um projeto com laravel e para front estou usando vue.

O projeto já faz busca por filtro e ordenação pelos campos, entretanto a paginação não tive sucesso. Entre muitos tutoriais, documentos e vídeos, tentei por fim usar um desses dois componentes:

  • https://vuejsexamples.com/a-simple-pagination-bar-including-length-menu/
  • https://github.com/gilbitron/laravel-vue-pagination

Alguém que já conseguiu utilizá-lo, conseguiria me informar onde estou errando? No código abaixo, tento utilizar o primeiro componente que é mais funcional.

Desde já agradeço quem ajudar.

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>