javascript - 如何从jquery数据表中的ajax调用获取动态列标题和结果

Question

我想显示动态列标题以及数据表中的结果。在 aaData 和 aoColumns 属性中必须从 ajax 调用获取结果数据和列名称，请建议我如何执行此操作或给我一些替代解决方案来获取来自 ajax 调用的动态数据和列标题，这是我的代码:

var $table=$('#MSRRes').dataTable( {
    "bFilter": false,                         
    "bDestroy": true,
    "bDeferRender": false,
    "bJQueryUI": true,
    "oTableTools": {
        "sSwfPath": "swf/copy_cvs_xls_pdf.swf",
    },
    "sDom": 'TC<"clear">l<"toolbar">frtip',
    "ajax" :{
        url: 'getResult.php',
        type: "POST",
        data: {
           formData:postData,
         }  
    },
    "aaData": results.DATA ,
    "aoColumns": [ column_names ]
});

这是我的 ajax 调用，用于获取要显示的结果数据和列名称:

$result=$afscpMsrMod->getAdvanceSearchResults($colCond,$whereCond,$having);
foreach($cols as $col) {
    array_push($colArr, $colnames);
}
$colJson= json_encode($colArr);
$newarray = array(
    "draw"            => 1,
    "recordsTotal"    => sizeof($result),
    "recordsFiltered" => sizeof($result),
    "data"            => $result,
    "COLUMNS"         => $colJson   
);
echo json_encode($newarray);

Answer 1

似乎没有办法使用数据表中的功能来获得动态列名称。您可以解决这个问题，如果您自己执行ajax请求(例如$.ajax)，然后在ajax请求的.complete上，使用刚刚返回的ajax数据适本地设置DataTable列选项，然后创建数据表。这也意味着您永远不能简单地重新加载表数据，而是需要在每次请求数据时重新初始化表。

步骤:

1. 自己手动执行 ajax 请求
2. 使用该 ajax 数据构造您将传递给 DataTables 列选项的列对象。
3. 使用您在第 2 步中创建的列对象以及第 1 步中返回的数据初始化数据表。

注意:DataTable 本身不需要发出任何 ajax 请求，因为您已经拥有第 1 步中的数据。

编辑:这是一个使用 JQuery 发出 ajax 请求的示例:

// Assume this object is the json that the ajax request returns.
{
    customcols: ['lah', 'dee', 'dah'],
    mydata: [
        {
            lah: "value1",
            dee: "value2",
            dah: "value3",
        },
        {
            lah: "value4",
            dee: "value5",
            dah: "value6",
        },
        ]
}

然后，为了响应某些内容，something_happened 被调用。

function something_happened(){
    $.ajax('/whatever/your/ajax/address/is')
        .done(maketable)
}

function maketable(data){
    var data = data.mydata;
    var column_names = data.customcols;
    var columns = []
    for (var i = 0; i < column_names.length; i++) {
        columns[i] = {
            'title': column_names[i],
            'data': column_names[i]
        }
    };
    $('#someplaceholder').DataTable({
        columns: columns,
        data: data,
    })

}

此示例使用“使用对象数组作为数据源”(请参阅​​ http://datatables.net/reference/option/data)。