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" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.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的基本配置。当我们需要进行更多的定制化时,可以参考官方文档进行相关的配置。