Select Multiple Rows With Checkboxes Using jQuery Datatable
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Dikshita
In this article we will show you the solution of select multiple rows with checkboxes using jQuery datatable and will demonstrate using jQuery how to check or choose multiple checkboxes on an HTML table.
Each entry in the table will have a checkbox, allowing the user to choose a specific row.
The idea of selecting multiple rows with checkboxes will be demonstrated using a jQuery datatable.
Step By Step Guide On Select Multiple Rows With Checkboxes Using jQuery Datatable :-
Datatables is a cutting-edge jQuery plugin that lets us add complex controls and interactive elements to HTML tables for our websites.
There are many customization options available, and it is straightforward to use.
Pagination, searching, sorting, and multiple column ordering are other functionalities that are frequently used.
We will learn how to manage the selection of many rows in this post.
The developers can add on functionality based on the requirements of the application after a very basic example.
The following pre-compiled files are required for implementation:
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
Strategy: Student information such as student id, name, age, gender, and marks earned are included in a straightforward student table.
Tables are initialized using the DataTable plugin. The total number of rows in the table that are now selected can be found by selecting the button with the words "Total selected rows."
The rows().data() method of the plugin is used for this.
<html>
<head>
<link rel="stylesheet"
href=
"https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<script type="text/javascript"
src=
"https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h2>Select multiple rows with checkboxes using jquery datatable</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>Pragati</td>
<td>22</td>
<td>Female</td>
<td>1000</td>
</tr>
<tr>
<td>ST2</td>
<td>Amruta</td>
<td>23</td>
<td>Female</td>
<td>1000</td>
</tr>
<tr>
<td>ST3</td>
<td>Aachal</td>
<td>20</td>
<td>Female</td>
<td>1000</td>
</tr>
<tr>
<td>ST4</td>
<td>Sanika</td>
<td>19</td>
<td>Female</td>
<td>1000</td>
</tr>
<tr>
<td>ST5</td>
<td>Shivani</td>
<td>17</td>
<td>Female</td>
<td>1000</td>
</tr>
<tr>
<td>ST6</td>
<td>Sumit</td>
<td>21</td>
<td>Male</td>
<td>1000</td>
</tr>
<tr>
<td>ST7</td>
<td>Kaustubh</td>
<td>20</td>
<td>Male</td>
<td>1000</td>
</tr>
<tr>
<td>ST8</td>
<td>Majed</td>
<td>19</td>
<td>Male</td>
<td>1000</td>
</tr>
<tr>
<td>ST9</td>
<td>Shailesh</td>
<td>23</td>
<td>Male</td>
<td>1000</td>
</tr>
<tr>
<td>ST10</td>
<td>Pranav</td>
<td>21</td>
<td>Male</td>
<td>1000</td>
</tr>
<tr>
<td>ST11</td>
<td>Rehmat</td>
<td>24</td>
<td>Male</td>
<td>1000</td>
</tr>
<tr>
<td>ST12</td>
<td>Supriya</td>
<td>23</td>
<td>Female</td>
<td>1000</td>
</tr>
<tr>
<td>ST13</td>
<td>Srushti</td>
<td>18</td>
<td>Female</td>
<td>1000</td>
</tr>
<tr>
<td>ST13</td>
<td>Rohit</td>
<td>20</td>
<td>Male</td>
<td>1000</td>
</tr>
</tbody>
</table>
<br />
<button id="btnID">
Total selected rows
</button>
<br />
<div id="resultID"></div>
<script>
$(document).ready(function () {
var studentTable = $('#tableID').DataTable();
$('#tableID tbody').on(
'click', 'tr', function () {
$(this).toggleClass('selected');
});
$('#btnID').click(function () {
var totalCount
= studentTable.rows('.selected')
.data().length;
$("#resultID").show().html(
"<br /><b>User clicked </b> "
+ totalCount + ' rows ');
});
});
</script>
</body>
</html>
- Our code begins with HTML and HEAD tags.
- In the head section, we link to the jQuery library file, the Datatable plugin JS library file, and the Datatable plugin file.
- Next, we start the body portion.
- Using the H2 tag, we supply the heading in the body.
- Next, we establish an HTML table with student information, including studentid, studentname, age, gender, and grades earned.
- Next, we design the button that displays the total number of chosen rows.
- We then begin our script.
- We initialise the datatable in our script.
- Next, we click on the rows to activate the chosen class.
- After that, the total number of rows is shown by clicking a button.
- The script then comes to a conclusion.
- Lastly, we conclude our programme with the help of BODY & HTML Tags.
Conclusion :-
Thus, utilising a jQuery datatable to select multiple rows using checkboxes, we have successfully learned the concept.
We can also see that various stylistic options may be helpful in helping the user understand the selected state of the components in a table.
I hope this article on select multiple rows with checkboxes using jQuery datatable helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
