如何使用 jQuery DataTables 插件处理多行选择？

Datatables 是一个现代 jQuery 插件，用于向我们网页的 HTML 表格添加交互式和高级控件。它简单易用，有许多可供开发人员自定义更改的选项。其他常见功能是分页、搜索、排序和多列排序。

在本文中，我们将学习处理多行选择。显示了一个非常简单的示例，开发人员可以根据应用程序的需要添加功能。实现所需的预编译文件是：

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

方法：使用一个简单的学生表，其中包含学生详细信息，例如学生 ID、姓名、年龄、性别和得分。该表是使用 DataTable 插件初始化的。单击带有文本“所选行总数”的按钮时，它会给出表中当前所选行的总数。这是使用插件的rows().data() 方法完成的。

例子：

HTML

  
  
  
  
  
  
  
  
  
  


  Handling Datatable multiple rows selection
  
  
  
    
      
        
        
        
        
        
  
      
    
    
      
        
        
        
        
        
      
      
        
        
        
        
        
      
      
        
        
  
        
        
        
      
      
        
        
        
        
        
      
      
        
        
        
        
        
      
      
        
        
        
        
        
      
      
        
        
        
        
        
      
      
        
        
        
        
        
      
      
        
        
        
        
        
      
      
        
        
        
        
        
      
      
        
        
        
        
        
      
      
        
        
        
        
        
      
      
        
        
        
        
        
      
      
        
        
        
        
        
      
      
        
        
        
        
        
      
      
        
        
        
        
        
      
    
  StudentIDStudentNameAgeGenderMarks ScoredST1Prema35Female320ST2Wincy36Female170ST3Ashmita41Female860ST4Kelina32Female433ST5Satvik41male162ST6William37Female372ST7Chandan31male375ST8David45male327ST9Harry29male205ST10Frost29male300ST11Ginny31male560ST12Flod45Female342ST13Marshy23Female470ST13Kennedy43male313ST14Fiza31Female750ST15Silva34male985
  
  
    Total selected rows
  
  
  
  
    // 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 ');
      });
    });
  

输出：

• 行选择前：

• 行选择后：

• 在不同页面中选择行后：