How to handle multiple rows selection using jQuery DataTables plugin ?

Last Updated : 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>