使用Datatables Jquery动态创建列

时间:2011-10-09 17:33:37

标签: datatables

我使用带有server_processing的Datatables来获取数据,主要问题是我不想在html (<th width="25" id ="th1">id</th>)中指定列的名称,我想在通过ajax获取数据时动态创建列。

我的代码是:

$('#table').dataTable( {

    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "server_processing.php?db="+pid+"&table="+id+"", //pid is the name of database and id the name of the table
     "bJQueryUI": true,
    "sPaginationType": "full_numbers"

} );             

1 个答案:

答案 0 :(得分:5)

&#34;虽然DataTables可以直接从DOM获取有关表的信息,但您可能希望为每个列提供DataTables特定说明。这可以使用aoColumnDefs参数或aoColumns以及为每列提供的对象信息来完成。&#34; - http://datatables.net/usage/columns

类似:

HTML

<table class="display" id="table"></table>

JS

$("#table").dataTable({
    bJQueryUI:true,
    aoColumns:[
        {mDataProp:"foo",sTitle:"Foo Title"},
        {mDataProp:"bar",sTitle:"Bar Title"}
    ],
    fnServerData: function( sUrl, data, fnCallback){
        $.get('data.php', function(res) {
            fnCallback({  // process results to match table format
                "sEcho":config.sEcho,
                "iTotalRecords":res.data.total || res.data.count,
                "iTotalDisplayRecords":res.data.count || res.data.total,
                "aaData":res.data.list
            })
        });
    }
})

data.php在哪里

{
    data:{
        total:200,
        count:3,
        list:[
            {foo:"Foo 1",bar:"Bar 1"},
            {foo:"Foo 2",bar:"Bar 2"},
            {foo:"Foo 3",bar:"Bar 3"},
        ]
    }
}

此处还有一个很好的总结: http://datatables.net/usage/options#aaData