Como atualizar manualmente a tabela de tabelas de dados com novos dados JSON


98

Estou usando o plugin jQuery datatables e carrego meus dados que carreguei no DOM na parte inferior da página e inicia o plugin desta maneira:

var myData = [
    {
        "id": 1,
        "first_name": "John",
        "last_name": "Doe"
    }
];

$('#table').dataTable({
    data: myData
        columns: [
        { data: 'id' },
        { data: 'first_name' },
        { data: 'last_name' }
    ]
});

Agora. depois de realizar alguma ação, quero obter novos dados usando ajax (mas não a opção ajax construída em tabelas de dados - não me interpretem mal!) e atualizar a tabela com esses dados. Como posso fazer isso usando a API de tabelas de dados? A documentação é muito confusa e não consigo encontrar uma solução. Qualquer ajuda será muito apreciada. Obrigado.


Que tal excluir o tablebody existente e criá-lo novo?
Repórter de

Respostas:


177

SOLUÇÃO: (Atenção: esta solução é para datatables versão 1.10.4 (no momento) não versão legada).

ESCLARECIMENTO De acordo com a documentação da API (1.10.15), a API pode ser acessada de três maneiras:

  1. A definição moderna de DataTables (caixa superior):

    var datatable = $( selector ).DataTable();

  2. A definição legada de DataTables (caixa do camelo inferior):

    var datatable = $( selector ).dataTable().api();

  3. Usando a newsintaxe.

    var datatable = new $.fn.dataTable.Api( selector );

Em seguida, carregue os dados assim:

$.get('myUrl', function(newDataArray) {
    datatable.clear();
    datatable.rows.add(newDataArray);
    datatable.draw();
});

Referências API:

https://datatables.net/reference/api/clear ()

https://datatables.net/reference/api/rows.add ()

https://datatables.net/reference/api/draw ()


4
Isso foi muito difícil de encontrar, muito obrigado! Usando isso para persistir a tabela de dados entre viagens de ida e volta do servidor.
Doug

E quanto aos datatables versão 1.9.4, estou enfrentando o mesmo problema nisso
Hardik Masalawala

4
Eu só quero acrescentar que você também pode encadear os métodos (ou seja datatable.clear().rows.add(newDataArray).draw()). A partir deste comentário, estou usando a versão 1.10.18
Sal_Vader_808 de

como posso adicionar uma coluna com o botão de controle
ajinkya

30

Você pode usar:

$('#table').dataTable().fnClearTable();
$('#table').dataTable().fnAddData(myData2);

Jsfiddle

Atualizar. E sim, a documentação atual não é tão boa, mas se você estiver bem usando versões mais antigas, pode consultar a documentação legada .


Sim, você está certo, mas estou usando a versão mais recente das tabelas de dados. Enfim, encontrei uma solução e atualizei minha dúvida. Obrigado pelo seu interesse :)
Indy

1
@CookieMan, remova sua edição e poste como uma resposta. Depois disso, marque como aceito.
Repórter de

esta solução não está atualizando a seção de paginação
Alok Deshwal

8

Você precisa destruir a instância da tabela de dados antiga e, em seguida, reinicializar a tabela de dados

Primeiro, verifique se a instância da tabela de dados existe usando $ .fn.dataTable.isDataTable

se existir, destrua-o e crie uma nova instância como esta

    if ($.fn.dataTable.isDataTable('#dataTableExample')) {
        $('#dataTableExample').DataTable().destroy();
    }

    $('#dataTableExample').DataTable({
        responsive: true,
        destroy: true
    });

5

Aqui está a solução para a tabela de dados legada 1.9.4

    var myData = [
      {
        "id": 1,
        "first_name": "Andy",
        "last_name": "Anderson"
      }
   ];
    var myData2 = [
      {
        "id": 2,
        "first_name": "Bob",
        "last_name": "Benson"
      }
    ];

  $('#table').dataTable({
  //  data: myData,
       aoColumns: [
         { mData: 'id' },
         { mData: 'first_name' },
         { mData: 'last_name' }
      ]
  });

 $('#table').dataTable().fnClearTable();
 $('#table').dataTable().fnAddData(myData2);

Isso funciona para a versão recente (por favor, considere a data do comentário). Obrigado, Vikas!
Telmo

Isso funcionou para mim. Mas não entendo por que posso usar todos esses exemplos: var datatable = $ (selector) .DataTable (); var datatable = $ (seletor) .dataTable (). api (); var datatable = novo $ .fn.dataTable.Api (seletor); Mas ao adicionar .row (). Add () não funciona.
Fernando Palma,

4

No meu caso, não estou usando a API ajax embutida para alimentar o Json na tabela (isso se deve a alguma formatação que era bastante difícil de implementar dentro do retorno de chamada de renderização da tabela de dados).

Minha solução foi criar a variável no escopo externo das funções onload e a função que lida com a atualização de dados (var table = null por exemplo).

Então eu instanciai minha tabela no método de carregamento

$(function () {
            //.... some code here
            table = $("#detailReportTable").DataTable();
            .... more code here
        });

e, finalmente, na função que lida com a atualização, eu invoco os métodos clear () e destroy (), busco os dados na tabela html e reinstancia a tabela de dados, como tal:

function getOrderDetail() {
            table.clear();
            table.destroy();
            ...
            $.ajax({
             //.....api call here
            });
            ....
            table = $("#detailReportTable").DataTable();
   }

Espero que alguém ache isso útil!


2
Destruir a mesa inteira em cada viagem de ida e volta é bastante caro e o estado está perdido também. Você deve considerar a resposta aceita onde o estado da mesa é mantido.
nhaberl
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.