4

Existe uma forma de trazer as colunas do DataTable pelo API vindo do Ajax? Como exemplo temos esse seguinte código

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "scripts/post.php",
            "type": "POST"
        },
        "columns": [
            { "data": "first_name" },
            { "data": "last_name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} ); 

Porém ali ja esta definido as colunas pelo proprio Javascript. Gostaria de trazer junto com o Ajax do proprio DataTable as colunas, sem precisar fazer o Ajax pelo jquery para buscar as colunas e depois criar o datatable.

Algo como isso:

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "scripts/post.php",
            "type": "POST"
        },
        "columns": data.colunas //ISSO AQUI
    } );
} ); 
1
  • Confesso que pesquisei exaustivamente, mas não encontrei! Pensei que fosse o mesmo e tentei chamar o objeto do js var table = $....DataTable() ..."columns" : table.ajax.columns -- tudo sem sucesso! Commented 28/11/2018 às 15:45

2 Respostas 2

2
+25

Segundo essa FAQ não é possível definir as colunas no JSON do retorno do DataTables. Uma solução é carregar a sua tabela via $.ajax

Exemplo

$(document).ready(function() {
  $.ajax({
    url: 'https://api.myjson.com/bins/uo5vm',
    cache: false,
    type: 'GET',
    success: function(d) {
      $('#example').DataTable({
        dom: "Bfrtip",
        data: d.data,
        columns: d.columns
      });
    },
    error: function(jqXHR, exception) {
      var msg = '';
      if (jqXHR.status === 0) {
        msg = 'Not connect.\n Verify Network.';
      } else if (jqXHR.status == 404) {
        msg = 'Requested page not found. [404]';
      } else if (jqXHR.status == 500) {
        msg = 'Internal Server Error [500].';
      } else if (exception === 'parsererror') {
        msg = 'Requested JSON parse failed.';
      } else if (exception === 'timeout') {
        msg = 'Time out error.';
      } else if (exception === 'abort') {
        msg = 'Ajax request aborted.';
      } else {
        msg = 'Uncaught Error.\n' + jqXHR.responseText;
      }
      console.log(msg);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>



<table id="example"></table>

3
  • Porque async: false ? Commented 28/11/2018 às 17:30
  • Desse jeito aí funciona o ajax.reload ? Commented 28/11/2018 às 17:47
  • @RafaelLemos não dessa forma, já que os dados não estão vindo do ajax do Datatable. Commented 28/11/2018 às 18:59
2

Pois bem:

Não é a melhor solução, mas funciona no table.ajax.reload()

Esta função que criei vai reposicionar os nomes diretamente no html pegando o resultado vindo do ajax.

$(document).ready(function(){
var Tabela = $('#TabelaDeClientes').DataTable( {
  ajax : "urldo.json",
});


Tabela.ajax.reload(function(result){
    $(result.columns).each(function(i,v){
        $('#TabelaDeClientes thead tr th').each(function(r,f){
            if(i==r){
                $(this).text(v);
            }
        });
        
    });
});
});
<table id="TabelaDeClientes"></table>

Entrada do ajax:

{"columns":["Id", "Ecorreio", "Chave", "DataPediu", "DataLiberou", "DataBaixou", "Chave"], "data":[["1", "[email protected]", "9f6a982b-4ce2-4dc9-8469-4c42a4398c8c", "2018-11-22 03:10:30", "2018-11-22 03:57:40", "2018-11-22 03:54:36", "9f6a982b-4ce2-4dc9-8469-4c42a4398c8c"], ["2", "[email protected]", "7e39f675-1827-4752-83b9-6e22209f7cf0", "2018-11-22 03:57:09", "2018-11-22 03:57:40", "", "7e39f675-1827-4752-83b9-6e22209f7cf0"], ["3", "[email protected]", "6cd26a91-bda8-4f7d-992f-bee60fc1d8a3", "2018-11-26 12:24:23", "", "", "6cd26a91-bda8-4f7d-992f-bee60fc1d8a3"]]}

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 .