使用Datatables Jquery动态创建列

Question

我使用带有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"

} );             

Answer 1

"虽然数据表可从DOM直接获取有关表的信息,您不妨为数据表每一列的具体说明,这您就可以利用aoColumnDefs参数,或aoColumns和每一列给出的对象的信息来完成." - 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