Datatables is a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpages. It is a simple and easy to use with a many options available for developer’s custom changes. The other common features are pagination, searching, sorting and multiple column ordering.
In this article, we will learn to handle multiple rows selection. A very simple example is shown, the developers can add on functionalities as per the application’s need. The pre-compiled files which are needed for implementation are:
CSS:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
JavaScript:
https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
Approach: A simple student table is used with student details like student id, name, age, gender, and marks scored. The table is initialized using the DataTable plugin. On clicking the button with the text “Total selected rows”, it gives the total number of currently selected rows in the table. This is done using the plugin’s rows().data() method.
Example:
HTML
<html>
<head>
<link rel="stylesheet"
href=
<script type="text/javascript"
</script>
<script type="text/javascript"
src=
</script>
</head>
<body>
<h2>Handling Datatable multiple rows selection</h2>
<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>
|
Output:
- After rows selection in different pages:
