Datatables是一個功能豐富的開源JS表格插件，它能夠?qū)?shù)據(jù)以受用戶控制的方式呈現(xiàn)在網(wǎng)頁上。而Datatables和JSON的結(jié)合則能增強Datatables的靈活性和適用性。

為了使用JSON數(shù)據(jù)渲染Datatables，必須先將數(shù)據(jù)按照規(guī)定的格式轉(zhuǎn)化為JSON對象。以下示例代碼將演示如何以JSON格式初始化Datatables。

$(document).ready(function() {
var data = [
{
"name": "Tom",
"age": 18,
"gender": "male",
"hobby": ["reading", "running"]
},
{
"name": "Lucy",
"age": 20,
"gender": "female",
"hobby": ["drawing", "singing"]
},
{
"name": "Jerry",
"age": 22,
"gender": "male",
"hobby": ["playing games", "swimming"]
}
];
$('#example').DataTable( {
data: data,
columns: [
{ data: 'name' },
{ data: 'age' },
{ data: 'gender' },
{ data: 'hobby' }
]
} );
});

代碼中的"data"數(shù)組包含三個對象，每個對象表示一個人的信息。而Datatables的初始化選項中的"data"屬性指定了要渲染的數(shù)據(jù)源為"data"數(shù)組，而"columns"屬性則指定了每列數(shù)據(jù)顯示的字段。需要注意的是，如果對象的某項"Hobby"具有多個值，則將以逗號分隔的字符串模式呈現(xiàn)在單元格中。

由于Datatables支持自定義列屬性，因此可以進行更為細化的列設置。比如在上述示例代碼中，如果想將"hobby"列設置為數(shù)據(jù)列，用于搜索和排序，需要將"columns"中該列的配置從“data”轉(zhuǎn)為“orderable”:

...
$('#example').DataTable( {
data: data,
columns: [
{ data: 'name' },
{ data: 'age' },
{ data: 'gender' },
{ 
data: 'hobby',
orderable: true,
render: function(data, type, row) {
return data.join(', ');
}
}
]
} );
...

在上述代碼中，引入了一個新的配置項"render"，使得"hobby"列能夠以逗號分隔的方式呈現(xiàn)出多個值。并且由于"hobby"列的值類型為數(shù)組，因此通過該函數(shù)將多個值轉(zhuǎn)換為字符串，用于呈現(xiàn)在單元格中。

綜上所述，Datatables和JSON兩者的組合使得數(shù)據(jù)渲染更加靈活，可應用于更多場景之中。不過，僅僅演示了Datatables+JSON的一個基礎用法，更多個性化定制還需要開發(fā)者自行實現(xiàn)。