jQuery表格插件datatables用法详解
简介
datatables是一款非常流行的jQuery表格插件，它具有高度的灵活性和扩展性，可以帮助开发者方便地生成丰富交互性的数据表格。datatables支持多种数据源和接口，可以与各种服务器端语言如PHP、Java、.Net等进行交互。datatables还拥有众多强大的扩展插件，可用于实现排序、过滤、分页、搜索等功能。
以下为使用datatables生成数据表格的详细步骤：
安装
datatables可以在官网 https://datatables.net/ 下载，主要有两种部署方式：
- 直接使用datatables官方提供的JS和CSS文件；
- 使用npm进行包管理，使用时候再import。
HTML结构
在HTML代码中，需要设置一个table元素并添加thead和tbody，如下所示：
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
... ...
</tbody>
</table>
初始化DataTable
在调用datatables之前，需要先引入datatables的JS文件和CSS文件，并在JS代码中进行初始化设置。
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" />
<script>
$(document).ready(function() {
$('#example').DataTable();
});
</script>
此时，我们已经成功地实现了一个最基本的datatable表格。
配置选择器
在datatables中，可以通过选择器选取一个或多个table元素，并对它们进行不同的设置。选择器可以是一个CSS类名或者一个ID名。
$('.my-table').DataTable();
$('#example1, #example2').DataTable();
设置列的排序和搜索功能
在默认情况下，datatables会自动为列设置排序和搜索功能。如果想要针对某一列禁用排序和搜索功能，可以在datatable中进行设置。
$('#example').DataTable( {
"columnDefs": [
{ "orderable": false, "targets": 1 }
]
} );
上述代码将禁用第二列的排序和搜索功能。
配置数据源
在默认情况下，datatables中的数据源可以是一个HTML table或者一个Javascript的二维数组。如果需要从服务器获取数据，可以通过ajax向服务器发送请求获取数据。
$('#example').DataTable( {
"ajax": "/data/data.json"
} );
上述代码将从服务器加载一个名为"data.json"的JSON数据文件，文件中包含所需的数据。加载成功后，datatables将自动将数据插入数据表格中。
配置自定义分页
在datatables中，可以使用默认的分页功能，也可以对分页进行自定义操作。可以使用插件自定义分页效果，或是通过回调函数定制自己的分页操作。
$('#example').DataTable( {
"pagingType": "full_numbers",
"pageLength": 5
} );
上述代码将使用full_numbers类型的分页效果，每页显示5行数据。
示例1
以下示例将演示如何使用datatables从服务器加载json数据。
<!DOCTYPE html>
<html>
<head>
<title>DataTable Demo</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" />
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable({
"ajax": {
"url": "/data/data.json",
"dataSrc": ""
},
"columns": [{
"data": "name"
},
{
"data": "position"
},
{
"data": "office"
},
{
"data": "age"
},
{
"data": "start_date"
},
{
"data": "salary"
}
]
});
});
</script>
</body>
</html>
上述代码演示了如何使用datatables从服务器上加载json数据。通过配置ajax选项，datatables会向指定的地址发送请求获取数据，并自动将数据渲染在数据表格中。
示例2
以下示例演示如何使用datatables生成可编辑表格。
<!DOCTYPE html>
<html>
<head>
<title>DataTables Editable Cells using jEditable</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jeditable/2.7.1/jquery.jeditable.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// initialize DataTable
var oTable = $("#example").DataTable({
"bRetrieve": true,
"bPaginate": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": false,
"aoColumns": [
{"sWidth": "200px"},
{"sWidth": "100%"},
{"sWidth": "50px"}
],
"fnDrawCallback": function() {
$('td.editable', this).editable(function(value, settings) {
return value;
}, {
indicator: '正在保存数据...',
cancel: '取消',
submit: '保存',
tooltip: '点击可编辑',
sHeight: "30px",
cssclass: "form-control"
});
}
});
// click handler for delete button
$('#example tbody').on('click', 'td.delete', function () {
if (confirm("确定删除该条记录吗?")) {
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow( nRow );
}
});
// click handler for add button
$('#example tbody').on('click', 'input.btnAdd', function () {
oTable.fnAddData([
'',
'',
'<td class="delete"><i class="fa fa-trash-o" aria-hidden="true"></i></td>'
]);
$('td.editable', oTable.fnGetNodes()).editable(function(value, settings) {
return value;
}, {
indicator: '正在保存数据...',
cancel: '取消',
submit: '保存',
tooltip: '点击可编辑',
sHeight: "30px",
cssclass: "form-control"
});
});
});
</script>
</head>
<body>
<table id="example">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="editable">John</td>
<td class="editable">Doe</td>
<td class="delete"><i class="fa fa-trash-o" aria-hidden="true"></i></td>
</tr>
<tr>
<td class="editable">Jane</td>
<td class="editable">Doe</td>
<td class="delete"><i class="fa fa-trash-o" aria-hidden="true"></i></td>
</tr>
<tr>
<td colspan="2"></td>
<td><input type="button" class="btnAdd" value="添加" /></td>
</tr>
</tbody>
</table>
</body>
</html>
上述示例演示了如何使用datatables生成可编辑表格，以及使用jquery-jeditable插件实现in-place编辑效果。用户可以直接在表格中进行编辑操作，包括添加、删除、修改内容等操作。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery表格插件datatables用法详解 - Python技术站
微信扫一扫 
支付宝扫一扫 