极客教程如何使用jQuery DataTables插件处理多行选择
Datatables是一个现代的jQuery插件，用于为我们的网页的HTML表格添加互动和高级控件。它是一个简单而容易使用的插件，有许多选项可供开发人员自定义更改。其他常见的功能有分页、搜索、排序和多列排序。
在这篇文章中，我们将学习如何处理多行选择。本文展示了一个非常简单的例子，开发者可以根据应用程序的需要增加功能。实现所需的预编译文件是。
CSS:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
方法：使用一个简单的学生表，其中有学生的详细信息，如_学生ID，姓名，年龄，性别，和分数。该表是用DataTable插件初始化的。当点击文本为 “所选行总数 “的按钮时，它给出了该表中当前所选行的总数。 这是用该插件的rows().data()方法完成的。
示例:
<html>
<head>
<!--Datatable plugin CSS file -->
<link rel="stylesheet"
href=
"https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<!--jQuery library file -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!--Datatable plugin JS library file -->
<script type="text/javascript"
src=
"https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h2>Handling Datatable multiple rows selection</h2>
<!--HTML tables with student data-->
<table id="tableID" class="display" style="width:100%">
<thead>
<tr>
<th>StudentID</th>
<th>StudentName</th>
<th>Age</th>
<th>Gender</th>
<th>Marks Scored</th>
</tr>
</thead>
<tbody>
<tr>
<td>ST1</td>
<td>Prema</td>
<td>35</td>
<td>Female</td>
<td>320</td>
</tr>
<tr>
<td>ST2</td>
<td>Wincy</td>
<td>36</td>
<td>Female</td>
<td>170</td>
</tr>
<tr>
<td>ST3</td>
<td>Ashmita</td>
<td>41</td>
<td>Female</td>
<td>860</td>
</tr>
<tr>
<td>ST4</td>
<td>Kelina</td>
<td>32</td>
<td>Female</td>
<td>433</td>
</tr>
<tr>
<td>ST5</td>
<td>Satvik</td>
<td>41</td>
<td>male</td>
<td>162</td>
</tr>
<tr>
<td>ST6</td>
<td>William</td>
<td>37</td>
<td>Female</td>
<td>372</td>
</tr>
<tr>
<td>ST7</td>
<td>Chandan</td>
<td>31</td>
<td>male</td>
<td>375</td>
</tr>
<tr>
<td>ST8</td>
<td>David</td>
<td>45</td>
<td>male</td>
<td>327</td>
</tr>
<tr>
<td>ST9</td>
<td>Harry</td>
<td>29</td>
<td>male</td>
<td>205</td>
</tr>
<tr>
<td>ST10</td>
<td>Frost</td>
<td>29</td>
<td>male</td>
<td>300</td>
</tr>
<tr>
<td>ST11</td>
<td>Ginny</td>
<td>31</td>
<td>male</td>
<td>560</td>
</tr>
<tr>
<td>ST12</td>
<td>Flod</td>
<td>45</td>
<td>Female</td>
<td>342</td>
</tr>
<tr>
<td>ST13</td>
<td>Marshy</td>
<td>23</td>
<td>Female</td>
<td>470</td>
</tr>
<tr>
<td>ST13</td>
<td>Kennedy</td>
<td>43</td>
<td>male</td>
<td>313</td>
</tr>
<tr>
<td>ST14</td>
<td>Fiza</td>
<td>31</td>
<td>Female</td>
<td>750</td>
</tr>
<tr>
<td>ST15</td>
<td>Silva</td>
<td>34</td>
<td>male</td>
<td>985</td>
</tr>
</tbody>
</table>
<br />
<button id="btnID">
Total selected rows
</button>
<br />
<div id="resultID"></div>
<script>
// Initialization of DataTable
(document).ready(function () {
var studentTable =('#tableID').DataTable();
// Activate the 'selected' class
// on clicking the rows
('#tableID tbody').on(
'click', 'tr', function () {
(this).toggleClass('selected');
});
('#btnID').click(function () {
// Display the total row count
// on clicking the button
var totalCount
= studentTable.rows('.selected')
.data().length;
("#resultID").show().html(
"<br /><b>User clicked </b> "
+ totalCount + ' rows ');
});
});
</script>
</body>
</html>
输出:
- 在行选择之前。
- 行选择后。
- 在不同的页面中选择行后。
