JQuery DataTable是一個非常好用的插件,用于實現高效的表格數據展示和交互,特別是在需要展示大量數據時更有優勢。本文將介紹JQuery DataTable的基本配置。
首先,我們需要引入JQuery和JQuery DataTable的相關文件。
<!-- 引入jQuery文件 --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- 引入jQuery DataTable文件 --> <link rel="stylesheet" type="text/css" > <script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
接下來,我們需要創建一個table標簽,并且添加相關的表頭和數據。注意表頭和數據要有相同的列數。
<table id="myTable"> <thead> <tr> <th>名稱</th> <th>價格</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>華為 Mate 30</td> <td>4999</td> <td>華為旗下的旗艦手機</td> </tr> <tr> <td>小米 10</td> <td>3999</td> <td>小米旗下的旗艦手機</td> </tr> </tbody> </table>
接下來,我們需要在JavaScript中調用DataTable的初始化函數,并進行相關的配置。
<script type="text/javascript"> $(document).ready(function() { $('#myTable').DataTable({ "ordering": true, // 是否允許排序,默認為true "paging": true, // 是否開啟分頁,默認為true "autoWidth": true, // 是否自適應寬度,默認為true "searching": true, // 是否允許搜索,默認為true "language": { // 語言設置 "url": "https://cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Chinese.json" } }); }); </script>
以上就是JQuery DataTable的基本配置。當我們需要進行更多的定制化時,可以參考官方文檔進行相關的配置。