欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

jquery datatable radio

吉茹定2年前9瀏覽0評論

jQuery DataTable對于我們進(jìn)行表格操作是非常方便的,而radio插件為我們的操作提供了更加便捷的方式。

首先我們需要引入jQuery和DataTable的相關(guān)代碼以及radio插件的JS和CSS文件。

<!-- 引入jQuery的代碼-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入DataTables的代碼-->
<link rel="stylesheet" >
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<!-- 引入radio插件的代碼-->
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<link rel="stylesheet" >

然后我們就可以開始編寫table的代碼了,并且使用radio插件來部署表格。

<!-- table部分HTML代碼-->
<table id="example" class="display">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>61</td>
<td>System Architect</td>
<td>$320,800</td>
</tr>
<tr>
<td></td>
<td>Garrett Winters</td>
<td>63</td>
<td>Accountant</td>
<td>$170,750</td>
</tr>
<tr>
<td></td>
<td>Ashton Cox</td>
<td>66</td>
<td>Junior Technical Author</td>
<td>$86,000</td>
</tr>
</tbody>
</table>
<!-- table部分JS代碼-->
$(document).ready(function() {
var table = $('#example').DataTable({
select: {
style: 'single'
}
});
});

上面代碼中,我們在DataTable的初始化參數(shù)中添加了select對象,使用該對象的style屬性,指定了顯示樣式為單選按鈕(single)。這就是radio插件的作用。

最后,我們可以從table中獲取我們選擇的數(shù)據(jù):

$('#example tbody').on('click', 'tr', function () {
var data = table.row( this ).data();
alert( 'You clicked on '+data[1]+'\'s row' );
});

這樣,我們就可以愉快地使用radio插件了。