How to organize pages with a table in Jquery

Question

How to organize pages with a table in Jquery

Navigation

#1 by (0 votes)

1

I have the following each that returns all records of clients inside 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 this way: Like a paging, every DIV will have to have 4 records. If you have 20 records in the table it would have to be broken into DIVS with 4 information each div, eg

Example: link

This would make it easier to make a paging.

How to return the values from the datatable? I've tried it in 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" }
        ]
      } );

DATABASECODEWITHDESTROY.DOESNOTWORK:

functionretorna_cliente(){vartabela=$('.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();
  }

javascript jquery

asked by anonymous 06.10.2017 / 14:28

1 answer

Convert a custom object to JSON in Totalcross Divs aligned with different Height

score 0 · Answer 1

There are several ways you can do paging, I'll demonstrate one using Datatable a plugin for jquery .

Instead of creating a variable and assembling the HTML into it to insert later, you can create a vector with the data and through the plugin assign the data contained in that vector to its HTML .

Constructing Tables with Paging Through Data in a JS Vector

I also 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><scriptsrc="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>