4

Estou criando uma tabela e preciso dar opção de ordenar a tabela pelo campo que preferir. Tentei utilizar o dataTable os dados são preenchidos corretamente na table mas quando clico em um cabeçalho para ordenar, filtrar, ou qualquer outra função do dataTable os dados da tabela somem e aparece a mensagem:

No data available in table

Meus códigos:

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

Retorno do web service: (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"
    }
  ]
}

Alguém sabe como resolver este problema?

2 Respostas 2

1

infelizmente você terá de usar a API do DataTables, segue abaixo um exemplo completo com o uso de todas as funções/opções. de que irá precisar.

dê enfase a options columns, ao evento fnRowCallback e as chamadas oTable.row.add({}), oTable.clear() e oTable.draw();

  • o options columns serve para definir o formato do seu modelo, ou seja as propriedades do seu objeto json`.
  • o fnRowCallback serve para modificar a DOM antes de inserir na tabela.
  • o DataTable.clear() serve para limpar a tabela.
  • o DataTable.row.add({}) adicionar novos registros.
  • o DataTable.draw() "recarrega" o 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

Você pode tentar aplicar o DataTable depois que a tabela estiver com os dados, mas o correto para adicionar linhas a uma tabela Datatable, não é usar append, é a própria API do datatables: http://datatables.net/examples/api/add_row.html

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 .