Jquery Datatable是一款非常實(shí)用的數(shù)據(jù)表格插件，它不僅能夠快速地呈現(xiàn)數(shù)據(jù)，還具備強(qiáng)大的排序、搜索等功能，受到了許多開(kāi)發(fā)者的青睞。在Datatable中，我們還可以使用img標(biāo)簽來(lái)展示圖片，下面就來(lái)學(xué)習(xí)一下如何在Datatable中使用img。

首先，在Datatable的HTML表格標(biāo)簽中定義一列，將這一列的數(shù)據(jù)類(lèi)型設(shè)置為html，以便我們輸入img標(biāo)簽展示圖片。

<table id="myTable">
<thead>
<tr>
<th>名稱(chēng)</th>
<th>描述</th>
<th>圖片</th>
</tr>
</thead>
<tbody>
<tr>
<td>iPhone X</td>
<td>Apple的旗艦手機(jī)</td>
<td data-order="<img src='http://example.com/iphone-x.png' width='40' height='40'>"></td>
</tr>
</tbody>
</table>

在數(shù)據(jù)列中的空白標(biāo)簽中，我們通過(guò)設(shè)置data-order屬性為img標(biāo)簽的HTML代碼，來(lái)達(dá)到展示圖片的目的。這里的圖片鏈接和圖片大小可以自行調(diào)整。詳細(xì)的img標(biāo)簽參數(shù)設(shè)置可以參考W3School提供的參考資料。

接下來(lái)，配置Datatable的JavaScript代碼：

$(document).ready(function() {
$('#myTable').DataTable({
"columnDefs": [
{ "orderDataType": "dom-html", "targets": 2 }
]
});
});

這里的columnDefs參數(shù)設(shè)置了數(shù)據(jù)列的渲染類(lèi)型，我們將第三列的渲染類(lèi)型定義為dom-html，以便正確的排序和搜索包含img標(biāo)簽的列。

到此，我們就學(xué)習(xí)了在Jquery Datatable中展示圖片的方法，通過(guò)設(shè)置data-order屬性和columnDefs參數(shù)，我們可以靈活而方便地展示和操作包含圖片的數(shù)據(jù)列。