淘先锋技术网

首页 1 2 3 4 5 6 7

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的基本配置。当我们需要进行更多的定制化时,可以参考官方文档进行相关的配置。