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>