如何动态制作Datatable Jquery答案

【问题标题】：How to make Datatable Jquery dynamically如何动态制作Datatable Jquery
【发布时间】：2017-10-30 22:17:07
【问题描述】：

我需要用 DataTable Jquery 动态创建一个表，该表必须是 Server-side processing 类型并且在同一个请求中（ Ajax) 和回答列都做了，结果很明显。

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

我尝试使用此代码，但没有成功

非常感谢

【问题讨论】：

欢迎来到 StackOverflow！如果您遇到特定编程问题，我们很乐意为您提供帮助，但我们不是来为您编写代码或设计您的系统的。您至少需要尝试解决您自己的问题。请参阅How do I ask a good question? 和What topics can I ask about here?。
jQuery 运行客户端。您使用什么 PHP 脚本来尝试制作表格？
我使用 PHP 但这不是我的问题，在我的 Json 中返回头部和行，但我不知道正确的形式

标签： php jquery json ajax datatables

【解决方案1】：

解决步骤：

制作html代码

<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"); } });
请求获取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 }]
现在我用获得的列初始化表

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 } }); };
来自服务器的响应：

{ "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" } ] }

【讨论】：