jquery.dataTables是一款在網(wǎng)頁上實現(xiàn)表格數(shù)據(jù)的交互式插件，并且提供了大量的API接口，可以輕松地讓您的數(shù)據(jù)在網(wǎng)頁上進行排序、搜索和美化。它還可以顯示動態(tài)列，動態(tài)列可以根據(jù)數(shù)據(jù)源自動添加新列并填充相應的數(shù)據(jù)，大大提高了數(shù)據(jù)的靈活性和可擴展性。

要實現(xiàn)動態(tài)列，我們需要定義一個回調(diào)函數(shù)來返回應該顯示的列名。jquery.dataTables提供了一個回調(diào)函數(shù)選項——aoColumns，通過返回一個由列名構成的數(shù)組，就可以實現(xiàn)動態(tài)列。具體代碼如下：

$(document).ready(function(){
$('#example').dataTable({
"aoColumns": [
{ "sTitle": "Name", "mDataProp": "name" },
{ "sTitle": "Position", "mDataProp": "position" },
{ "sTitle": "Office", "mDataProp": "office" },
{ "sTitle": "Age", "mDataProp": "age" },
{ "sTitle": "Start date", "mDataProp": "start_date" },
{ "sTitle": "Salary", "mDataProp": "salary" }
],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
//動態(tài)添加一列
var nCells = nRow.getElementsByTagName('td');
var len = nCells.length;
if (len == (this.fnSettings().aoColumns.length + 1))
return nRow;
var newCell = nRow.insertCell(len);
newCell.innerHTML = "" + aData.extra_field + "";
return nRow;
}
});
});

在這個例子中，我們在表格中增加了一個名為"extra_field"的新字段，代碼通過回調(diào)函數(shù)fnRowCallback來實現(xiàn)動態(tài)添加新列。每當插件渲染新的一行數(shù)據(jù)時，回調(diào)函數(shù)就會調(diào)用一次，并向渲染的各單元格添加新的列，從而實現(xiàn)動態(tài)列。最后，在表格渲染完成后，jquery.dataTables庫會自動將動態(tài)列添加到列頭中，而且還可以像普通列一樣進行排序和篩選。