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插件了。