How to handle multiple rows selection using jQuery DataTables plugin ?

29 Jan, 2021
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>  <!--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>
Output:
Before rows selection:
After rows selection:
After rows selection in different pages:
CSS-Misc
HTML-Misc
jQuery-UI
CSS
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a webpage for online food delivery system using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS