jQuery DataTables 获取选定的行数据 - Javascript

在实际开发中，我们经常会用到 DataTables 这个 jQuery 插件来创建数据表格。而在某些情况下，我们需要获取选定的行数据。本文将介绍如何使用 jQuery DataTables 获取选定的行数据。

步骤

1. 首先需要引入 jQuery 和 DataTables 的 JavaScript 和 CSS 文件。

<link rel="stylesheet" href="//cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>

2. 创建一个 HTML 表格，并且使用 jQuery DataTables 来初始化它。

<table id="myTable" class="display">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

<script>
  $(document).ready(function() {
    $('#myTable').DataTable();
  });
</script>

3. 监听表格的行点击事件。

$('#myTable tbody').on('click', 'tr', function() {
  // 获取选定的行数据
});

4. 在事件处理函数中，使用 DataTables 的 API 来获取选定的行数据。

$('#myTable tbody').on('click', 'tr', function() {
  var table = $('#myTable').DataTable();
  var rowData = table.row(this).data();
  console.log(rowData);
});

解释

• 在第 2 步中，我们使用 jQuery DataTables 的 API 来初始化一个 HTML 表格。这个 API 可以让我们非常方便地创建可排序、可筛选、可分页的表格。

• 在第 3 步中，我们监听表格的行点击事件。这个事件将在用户单击表格中的行时触发。

• 在第 4 步中，我们使用 DataTables 的 API 来获取当前选定的行数据。具体来说，我们使用 table.row(this) 方法来获取选定的行，然后使用 rowData() 方法来获取行数据。

结论

使用 jQuery DataTables 获取选定的行数据非常简单。只需要使用 DataTables 的 API 就可以轻松地获取选定的行数据，然后进行后续操作。