Bring the columns of the DataTable by the Datatabe Ajax itself

Question

Bring the columns of the DataTable by the Datatabe Ajax itself

Navigation

#1 by (2 votes)
#2 by (2 votes)

4

Is there a way to bring the columns of the DataTable through the API from Ajax? As an example we have this code

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

But here the columns are defined by the Javascript itself. I would like to bring along the Ajax of the DataTable itself columns, without having to do Ajax with jquery to fetch the columns and then create the datatable.

Something like this:

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "scripts/post.php",
            "type": "POST"
        },
        "columns": data.colunas //ISSO AQUI
    } );
} );

jquery-datatables datatable

asked by anonymous 02.08.2018 / 20:50

2 answers

How to use dplyr within a function? Adding value to a date with PHP

score 2 · Answer 1

According to this FAQ it is not possible to set the columns in JSON of return DataTables . One solution is to load your table via $.ajax

Example

$(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><linkhref="//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>

score 2 · Answer 2

Well:

Not the best solution, but works on table.ajax.reload ()

This function that I created will reposition the names directly in the html getting the result from 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>

Ajax entry:

{"columns": ["Id", "Ecorreio", "Key", "DataPediu", "DataLiberou", "DataBaixou", "Key" @ email.com "," 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"]]}