0

Bem eu fiz uma paginação com o plugin twbsPagination, funciona perfeitamente, mas ele não lista a quantidade de elementos por página. O que será que eu fiz errado? Eu queria que listasse 4 elementos por página. Vejam o código:

LINK do plugin: https://esimakin.github.io/twbs-pagination/

CÓDIGO:

 // paginação
 var page = 1;
 var is_ajax_fire = 0;
 var current_page = 7;
 var total_page = 3;

 // retorna os clientes cadastrados
 manageData();
 retorna_fornecedor();
 retorna_estados();

 function manageData() {

$.ajax({
  dataType: 'json',
  url: url_base + "clientes",
  data: {page:page}
}).done(function(data){

  $('#paginacao-clientes').twbsPagination({
    totalPages: total_page,
    visiblePages: current_page,
    onPageClick: function (event, pageL) {
      page = pageL;
      if(is_ajax_fire != 0){
        getPageData();
      }
    }
  });

  retorna_cliente(data);
  is_ajax_fire = 1;
});
}

 function getPageData()
 {
   $.ajax({
    dataType: 'json',
    url: url_base + "clientes",
    data: {page:page}
   }).done(function(data) {

    retorna_cliente(data);
   });
 }

RETORNA CLIENTES. FUNÇÃO:

    function retorna_cliente(data)
     {
     var id_cliente = "";
     var nome_cliente = "";
     var data_nascimento_cliente = "";
     var telefone_cliente = "";
     var celular_cliente = "";
     var cpf_cliente = "";
     var endereco_cliente = "";
     var email_cliente = "";
     var container_mostra_cliente = $('.mostra_clientes');
     var itemHTML = "";
     var mensagem_cliente = "Nenhum cliente encontrado";


    if (data == 0)
    {
      $('.cliente-error-registro').css('display','block');
      $('.cliente-error-registro .mensagem-erro').html(mensagem_cliente);
    }
    else
    {
      itemHTML += "<table id='datatable-checkbox' class='table table-striped table-bordered bulk_action dataTable no-footer' role='grid' aria-describedby='datatable-checkbox_info'>";
      itemHTML += "<thead>";
      itemHTML += "<tr>";
      itemHTML += "<th>";
      itemHTML += "<th><input type='checkbox' id='check-all' class='flat'></th>";
      itemHTML += "</th>";
      itemHTML += "<th>Nome</th>";
      itemHTML += "<th>Data de Nascimento</th>";
      itemHTML += "<th>Telefone</th>";
      itemHTML += "<th>Celular</th>";
      itemHTML += "<th>Cpf</th>";
      itemHTML += "<th>Endereço</th>";
      itemHTML += "<th>Email</th>";
      itemHTML += "</tr>";
      itemHTML += "</thead>";

      $.each(data, function(key,item)
      {
        id_cliente = item.id;
        nome_cliente = item.nome;
        data_nascimento_cliente = formataDataSQL(item.data_nascimento);
        telefone_cliente = item.telefone;
        celular_cliente = item.celular;
        cpf_cliente = item.cpf;
        endereco_cliente = item.endereco;
        email_cliente = item.email;

        itemHTML += "<tbody>";
        itemHTML += "<tr>";
        itemHTML += "<td><th><input type='checkbox' value='" +  id_cliente + "' name='verifica_check_box[]' id='verifica_check_box' class='flat'/></th></td>";
        itemHTML += "<td>" + nome_cliente + "</td>";
        itemHTML += "<td>" + data_nascimento_cliente + "</td>";
        itemHTML += "<td>" + telefone_cliente + "</td>";
        itemHTML += "<td>" + celular_cliente + "</td>";
        itemHTML += "<td>" + cpf_cliente  + "</td>";
        itemHTML += "<td>" + endereco_cliente + "</td>";
        itemHTML += "<td>" + email_cliente  + "</td>";
        itemHTML += "</tr>";
        itemHTML += "</tbody>";
      });

      itemHTML += "</table>";
      container_mostra_cliente.html(itemHTML);
    }

 }
2
  • Você poderia criar um codepen ou semelhante pra gente verificar? Commented 5/10/2017 às 20:31
  • @BrunnoVianna Na verdade ele retorna todos os registros mas a minha dúvida é como que faz para pegar somente 4 registros por página! Acredito que a mágica esteja ali no #paginacao-clientes Commented 5/10/2017 às 20:33

2 Respostas 2

0

Esse plugin não serve para manusear os dados, apenas para facilitar a criação de uma paginação. Quem vai segmentar o conteúdo é você.

Você pode, por exemplo, criar uma série de divs com os conteúdos divididos de 4 em 4 itens:

<div id="page-1" class="page">
    <table>...</table>
    <table>...</table>
    <table>...</table>
    <table>...</table>
</div>

<div id="page-2" class="page">
    <table>...</table>
    <table>...</table>
    <table>...</table>
    <table>...</table>
</div>
...

Todo esse conteúdo deve estar invisível na área de exibição. Então, em onPageClick, você pode executar algo como:

onPageClick: function (event, pageL) {
    $(".page").hide();
    $("#page-"+pageL).show();
};

Assim, você consegue gerenciar quantos itens serão exibidos, mas não através do plugin, que não oferece essa opção.

0

Você precisa necessariamente fazer essa paginação com esse plugin? O Laravel possui paginação nativa nele e é bem simples de usar!!!

você faz uma consulta normal na tabela de fornecedores dentro do seu controller como no exemplo abaixo:

$fornecedores = Fornecedores::where('cliente',$cliente)->paginate(4);

E na sua view você exibe normalmente

@foreach($fornecedores as $fornecedor)
      //Aqui entra seu html
@endforeach
{{$fornecedores->links()}} /isso irá criar os links de paginação com a formatação do bootstrap

pronto, já está feita a sua paginação!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .