Create a table with sorting using Datatable

Asked

Viewed 1,776 times

4

I am creating a table and need to give option to sort the table by the field you prefer. I tried to use the datatable the data is filled correctly in the table but when I click on a header to sort, filter, or any other function of the datatable the table data vanishes and the message appears:

No data available in table

My codes:

HTML

<div class="table-responsive">
    <table id="tableTarefas" class="table table-bordered table-hover table-striped">
        <thead>
            <tr>
                <th>Nome</th>
                <th>Grau</th>
                <th>Data</th>
                <th>Descrição</th>
                <th>Tempo de execução</th>
                <th>Informações adicionais</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

JS

$("#tableTarefas").dataTable();

$.ajax({
    type: "get",
    url: rootUrl + "tarefas/listAll" + updat,
    dataType: "json",
    success: function(data)
    {
        $("#tableTarefas").find("tbody tr").remove();
        data.result.forEach(function(tarefa)
        {
            row= "<tr>"
                    + "<td><a id='edit' href='#' data-id='" + tarefa.id_tar + "'>"+ tarefa.non_tar + "</a></td>"
                    +      "<td>"+ tarefa.gra_tar + "</td>"
                    +      "<td>" + tarefa.datf_tar + "</td>"
                    +      "<td>" + tarefa.des_tar + "</td>"
                    +      "<td>" + tarefa.tee_tar + "</td>"
                    +      "<td>" + tarefa.inf_tar + "</td>"
                    + "</td></tr>";

            $("#tableTarefas > tbody:last").append(row);
        });
    },
    error: function(result)
    {
        $("#errorLoad").html(getErrorMessage(result.responseText));
        $("#errorLoad").show();
        $("#tableTarefas").find("tbody tr").remove();
    }
});

Web service return: (2 Rows)

{
  "result":[
    {
      "id_tar":"24",
      "non_tar":"trtyr",
      "gra_tar":"10",
      "tee_tar":"00:00:00",
      "dati_tar":"2015-11-14",
      "datf_tar":"0000-00-00",
      "datd_tar":"2015-11-15",
      "des_tar":"",
      "con_tar":"0",
      "idu_tar":"1",
      "idud_tar":null,
      "inf_tar":"",
      "pts_tar":"0"
    },
    {
      "id_tar":"42",
      "non_tar":"asdas",
      "gra_tar":"1",
      "tee_tar":"00:00:00",
      "dati_tar":"2015-11-15",
      "datf_tar":"0000-00-00",
      "datd_tar":"2015-11-15",
      "des_tar":"",
      "con_tar":"0",
      "idu_tar":"1",
      "idud_tar":null,
      "inf_tar":"",
      "pts_tar":"0"
    }
  ]
}

Does anyone know how to solve this problem?

javascript jquery html json

2 answers

1

Unfortunately you will need to use the Datatables API, below is a complete example with the use of all functions/options. which you will need.

bore options columns, to the event fnRowCallback and the calls oTable.row.add({}), oTable.clear() and oTable.draw();

  • the options columns serves to define the format of your template, ie the properties of your json object`.
  • the fnRowCallback serves to modify the DOM before inserting in the table.
  • the DataTable.clear() serves to clear the table.
  • the DataTable.row.add({}) add new records.
  • the DataTable.draw() "reload" the Datatable.

faker.locale = "pt_BR"

var dataLimite = new Date("Sat Sep 20 1992 21:35:02 GMT+0200 (CEST)");
var tableTarefas = $("#tableTarefas");
var btSource = $("#btSource");

var mockPessoas = function () {
  var pessoas = [];
  for (var indice = 0; indice < 20; indice++) {
    var pessoa = {};
    var firstName = faker.name.firstName();
    var lastName = faker.name.lastName();

    pessoa.id = indice;
    pessoa.nascimento = faker.date.past(50, dataLimite).toLocaleDateString();  
    pessoa.nome =  faker.name.findName(firstName, lastName);

    pessoa.endereco = faker.address.streetAddress();
    pessoa.cidade = faker.address.city();
    pessoa.estado = faker.address.stateAbbr();
    pessoa.cep = faker.address.zipCode();
    pessoa.pais = faker.locales[faker.locale].address.default_country;
    pessoa.phone =  faker.phone.phoneNumber();
    pessoa.username =  faker.internet.userName(firstName, lastName);
    pessoa.senha =  faker.internet.password();
    pessoa.email =  faker.internet.email(firstName, lastName);
    pessoas.push(pessoa);
  }
  return pessoas;
}

var oTable = tableTarefas.DataTable({
  "columns": [
    { "data": "nome", "name": "Nome",   "targets": 0 },
    { "data": "nascimento", "name": "Nascimento",  "targets": 1 },
    { "data": "endereco", "name": "Endereco", "targets": 2 },
    { "data": "cidade", "name": "Cidade",  "targets": 3 },
    { "data": "estado", "name": "Estado",    "targets": 4 },
    { "data": "pais", "name": "Pais",  "targets": 5 },
    { "data": "cep", "name": "Cep", "targets": 6 },
    { "data": "phone", "name": "Phone",  "targets": 7 },
    { "data": "username", "name": "Username",    "targets": 8 },
    { "data": "senha", "name": "Senha",  "targets": 9 },
    { "data": "email", "name": "Email", "targets": 10 }
  ],
  "fnRowCallback": function(linha, data) {
    var link = document.createElement("a");
    link.id = "edit";
    link.href = "#";
    link.dataset.id = data.id;
    link.textContent = data.nome;
    linha.cells[0].textContent = "";
    linha.cells[0].appendChild(link);
  }
});

var atualizarPessoas = function () {
  var pessoas = mockPessoas();  
  pessoas.forEach(function (pessoa, indice) {
    oTable.row.add(pessoa);
  });
  oTable.draw();
}

atualizarPessoas();
btSource.on("click", function () {
  oTable.clear();
  atualizarPessoas();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.2/material.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.11/css/dataTables.material.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.0.1/faker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.2/material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.11/js/jquery.dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.11/js/dataTables.material.js"></script>

<button id="btSource" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Mudar Lista de Pessoas</button>
<div class="table-responsive mdl-data-table">
  <table id="tableTarefas" class="table table-bordered table-hover table-striped">
    <thead>
      <tr>
        <th>Nome</th>
        <th>Nascimento</th>
        <th>Endereco</th>
        <th>Cidade</th>
        <th>Estado</th>
        <th>Pais</th>
        <th>Cep</th>
        <th>Phone</th>
        <th>Username</th>
        <th>Senha</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

0

Browser other questions tagged javascript jquery html json

You are not signed in. Login or sign up in order to post.