在前端開(kāi)發(fā)中,我們經(jīng)常需要將后端返回的數(shù)據(jù)展示在網(wǎng)頁(yè)中。Datatable 是一個(gè)常用的 jQuery 表格展示插件,而 JSON 是數(shù)據(jù)交換的一種常用格式。下面我們來(lái)了解一下在 Datatable 中如何引用 JSON 對(duì)象。
假設(shè)后端返回的 JSON 數(shù)據(jù)如下:
{
"data": [
{
"name": "張三",
"age": 18,
"gender": "male"
},
{
"name": "李四",
"age": 20,
"gender": "female"
}
]
}
我們可以使用 Datatable 的 ajax 功能來(lái)從后端獲取數(shù)據(jù),然后在 Datatable 中展示數(shù)據(jù)。代碼如下:
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "data.json",
"columns": [
{ "data": "name" },
{ "data": "age" },
{ "data": "gender" }
]
} );
} );
在上面的代碼中,我們通過(guò) ajax 屬性指定了從 data.json 文件獲取數(shù)據(jù)。columns 屬性用于指定表格的每一列對(duì)應(yīng)的數(shù)據(jù)屬性名。
通過(guò)以上方式,我們就可以在 Datatable 中展示后端返回的 JSON 數(shù)據(jù)了。