Paging with twbsPagination plugin giving problem

Question

Well I made a pagination with the twbsPagination plugin, it works perfectly, but it does not list the amount of elements per page. What did I do wrong? I wanted you to list 4 elements per page. Look at the code:

PLUGIN LINK: https://esimakin.github.io/twbs-pagination/

CODE:

 // 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);
   });
 }

RETURNS CLIENTS. FUNCTION:

    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);
    }

 }

Answer 1

This plugin does not serve to handle the data, just to facilitate the creation of a pagination. Who will segment the content is you.

You can, for example, create a series of Divs with the contents divided into 4 items:

<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>
...

All this content must be invisible in the display area. Then, in onPageClick, you can run something like:

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

So, you can manage how many items will be displayed, but not through the plugin, which does not offer this option.

Answer 2

Do you necessarily need to make this pagination with this plugin? Laravel has native paging on it and is very simple to use!!!

you make a normal query in the vendor table inside your controller as in the example below:

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

And in your view you display normally

@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

Ready, your paging is done!