How to make Datatable Jquery dynamically - php

Question

I need to make a table dynamically with DataTable Jquery, the table must be Server-side processing type and in the same request (Ajax) and answer the columns are made and obviously the results.
DatosColumna=""//Json with Response of ajax
$('#table_query_info').dataTable({
columnDefs: DatosColumna,//Here its the headers
destroy: true,
processing: true,
serverSide: true,
ajax: {
url: myBaseUrl + "consults/find_docs",
type: "post",
data: function (d) {
d.datos = make_info()//Send Json with info
},
statusCode: {
200: function (resp) {
alert("OK");//That Good
}
}
}
});
I tried with this code but it has not worked
Thank you very much

Answer 1

steps for resolution:
make a html code
<table class="table" id="tablaindex" style="width:100%"></table>
Obtengo las columnas, antes de inicializar la tabla
$.ajax({
type: "POST",
url: "AtencionTurno/ColumnasDatatable",
data: TblOficina,
success: function (response) {
inicializarTabla(response);
}, error: function (request, status, error) {
console.log("Error");
}
});
The reques obtain the follow json
[
{
"title": "Column 1",
"data": "Id_Turno",
"orderable": false
},
{
"title": "Column 2",
"data": "Turno",
"orderable": false
},
{
"title": "Column 3",
"data": "Clasificacion",
"orderable": false
},
{
"title": "Column 4",
"data": "Concepto",
"orderable": false
},
{
"title": "Column 5",
"data": "Hora",
"orderable": false
}]
now I initialize the table with the columns that were obtained
inicializarTabla = function (columnas) {
var dataTable = $('#tablaindex').DataTable({
"processing": true,
"serverSide": true,
stateSave: true,
orderable: false,
"order": [],
columns: columnas,
"lengthChange": false,
searching: false,
colReorder: false,
"ajax": {
url: "AtencionTurno/IndexTurnos",
type: "post",
data: TblOficina
}
});
};
response from server:
{
"draw": "1",
"recordsTotal": 4,
"recordsFiltered": 4,
"data": [
{
"Id_Turno": "358",
"Turno": "ALAT1",
"Clasificacion": "euismod",
"Concepto": "Convallis",
"Hora": "11:00:12",
"Tiempo_Espera": "2018/07/03 11:00:12",
"Tipo_Cliente": "Calendario",
"Transferencia": "",
"null": "358"
},
{
"Id_Turno": "354",
"Turno": "ALAK23",
"Clasificacion": "euismod",
"Concepto": "Pagos",
"Hora": "16:36:14",
"Tiempo_Espera": "2018/06/29 16:36:14",
"Tipo_Cliente": "Utiles Escolares ",
"Transferencia": "",
"null": "354"
}
]
}