資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery DataTables 外掛顯示子行資訊？
在本文中，我們將學習如何使用 jQuery DataTables 外掛顯示子行資訊。我們還將提供一些 HTML 程式碼示例來說明此功能的使用。
jQuery DataTables 是一個功能強大的外掛，它提供了一種簡單的方法來在網頁上顯示錶格資料。它有很多功能，例如分頁、排序、搜尋等。它還為我們提供了 DataTables 外掛，使我們能夠顯示子行資訊，並因此顯示與每一行相關的其他資料。
現在，讓我們藉助一些示例來了解此功能。
示例 1
在此示例中，我們將建立一個簡單的 HTML 表格，其中包含員工列表及其相關資訊。我們還將向其中新增子行資訊，並使用函式定義其內容。
<html lang="en">
<head>
<title>How to display child row information using jQuery DataTables plugin?</title>
<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include DataTables library -->
<script src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.min.js"></script>
<!-- Include required CSS files -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables_themeroller.css">
</head>
<body>
<h3>How to display child row information using jQuery DataTables plugin?</h3>
<table id="employee-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Manager</td>
<td>$80,000</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Developer</td>
<td>$60,000</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>Developer</td>
<td>$50,000</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#employee-table').DataTable({
"paging": false,
"info": false,
"columnDefs": [
{
"targets": [1],
"className": "details-control"
}
],
"order": [[0, 'asc']],
"drawCallback": function() {
$('.details-control').unbind('click').on('click', function() {
var tr = $(this).closest('tr');
var row = $('#employee-table').DataTable().row(tr);
if (row.child.isShown()) {
row.child.hide();
tr.removeClass('shown');
} else {
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
}
});
function format(d) {
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>' +
'<td>Name:</td>' +
'<td>' + d[0] + '</td>' +
'</tr>' +
'<tr>' +
'<td>Position:</td>' +
'<td>' + d[1] + '</td>' +
'</tr>' +
'</tablev';
}
});
</script>
</body>
</html>
示例 2
在此示例中，我們將在每一行中新增一個帶有類“details-control”的按鈕，單擊該按鈕後，它將使用 format 函式顯示內聯 HTML 內容作為子行。子行將包含有關相應員工的其他詳細資訊。
檔名：index.html
<html lang="en">
<head>
<title>How to display child row information using jQuery DataTables plugin?</title>
<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include DataTables library -->
<script src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.min.js"></script>
<!-- Include required CSS files -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables_themeroller.css">
</head>
<body>
<h3>How to display child row information using jQuery DataTables plugin?</h3>
<table id="employee-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Manager</td>
<td>$80,000</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Developer</td>
<td>$60,000</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
const table = $('#employee-table').DataTable({
"columnDefs": [
{
"targets": [0, 1],
"className": "details-control",
"orderable": false
}
],
"order": [[0, 'asc']]
});
$('#employee-table tbody').on('click', 'td.details-control', function () {
const tr = $(this).closest('tr');
const row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
function format(data) {
const details = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>' +
'<td>Name:</td>' +
'<td>' + data[0] + '</td>' +
'</tr>' +
'<tr>' +
'<td>Position:</td>' +
'<td>' + data[1] + '</td>' +
'</tr>' +
'</table>';
return details;
}
});
</script>
</body>
</html>
結論
總之，jQuery DataTables 外掛提供了一種簡單有效的方法，可以在網頁上以表格格式顯示資料。它提供了許多功能，包括顯示巢狀或子行以及有關父行的其他資訊的功能。透過遵循本文中概述的步驟，我們學習瞭如何使用 jQuery DataTables 外掛顯示子行資訊。
更新於： 2023年8月2日
605 次瀏覽
廣告