How to organize pages with a table in Jquery

Question

I have the following each that returns all customer records within a table, and that works perfectly:

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

Here it displays a normal table, but I wanted it to be like this: Like a pagination, each DIV will have to have 4 records. If there are 20 records in the table it via have to be broken into DIVS with 4 information each div, example:

Example: https://jsfiddle.net/khpo3k8m/2/

So it would be easier to make a pagination.

How to return datatable values? I’ve tried ajax and nothing!

    $('.mostra_clientes .table').DataTable( {
         retrieve: true,
         "processing": true,
         paging: false,
         searching: false,
          "pageLength": 4,
          "ajax": {
          "type"   : "GET",
          "url"    : url_base + "clientes",
        },
        "columns": [
          { "data": "nome" },
          { "data": "data_nascimento" },
          { "data": "telefone" },
          { "data": "celular" },
          { "data": "cpf" },
          { "data": "endereco" },
          { "data": "email" }
        ]
      } );

DATATABLE CODE WITH DESTROY. DOES NOT WORK:

 function retorna_cliente()
 {
  var tabela = $('.mostra_clientes .table').DataTable({
  "pageLength": 4,
  "bPaging": "false",
  "bDestroy": "true",
  "ajax": {
    "url": url_base + "clientes",
    "type": "GET",
    "dataSrc": "",
  },
  "columns": [
    {
      "data": function ( data, type, row ) {
        return "<input type='checkbox' value='"+data['id']+"' name='verifica_check_box[]' id='verifica_check_box' class='flat'/>";
      }
    },
    { "data":"nome"},
    { "data":"telefone"},
    { "data":"cpf"},
    { "data":"endereco"},
    { "data":"email"},
  ],
  "bLengthChange": false,
  "bInfo": false,
  "bAutoWidth": false
  });

    tabela.destroy();
  }

Answer 1

There are several ways for you to make pagination, I will demonstrate one using Datatable a plugin for jquery.

Instead of creating a variable and mounting the HTML in it to then insert, you can create an array with the data and through the plugin assign the data contained in that vector to your HTML.

Building tables with pagination through data in a JS vector

I also left commented an example with AJAX and JSON

Ajax sourced data

Ajax data source (Objects)

/*
Exemplo com Ajax e JSON:
$('#Exemplo').DataTable( {
    "ajax": '../SuaPagina.php',
    "pageLength": 4,
    data: dataSet,
    columns: [
        { title: "Name" }
    ],
    "bLengthChange": false,
    "bInfo": false,
    "bAutoWidth": false,
     "bDestroy": true //Caso recarregue os dados dinamicamente.
});


SuaPagina.php:
{
  "data": [
    [
      "Manolo"
    ],
    [
      "Manola"
    ]
  ]
}
*/

var dataSet = [
    [ "João"],
    [ "Maria"],
    [ "José"],
    [ "Pedro"],
    [ "Carlos"],
    [ "Alberto"],
    [ "Sebastião"],
    [ "Márcia"]
]

$(document).ready(function() {
    $('#Exemplo').DataTable( {
        "pageLength": 4,
        data: dataSet,
        columns: [
            { title: "Name" }
        ],
        "bLengthChange": false,
        "bInfo": false,
        "bAutoWidth": false
    } );
} );

#Exemplo {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">


<table id="Exemplo"></table>