如何从jQuery DataTable中的ajax调用获取动态列标题和结果

use*_*086 2 javascript ajax datatable jquery jquery-datatables

我想在数据表中显示动态列标题以及结果。在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 ]
});
Run Code Online (Sandbox Code Playgroud)

这是我的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);
Run Code Online (Sandbox Code Playgroud)

Zen*_*odr 5

似乎没有一种方法可以使用DataTables中的功能来获得动态列名。您可以解决此问题,如果您自己执行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",
        },
        ]
}
Run Code Online (Sandbox Code Playgroud)

然后,作为响应,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,
    })

}
Run Code Online (Sandbox Code Playgroud)

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