如何使用 DataTables 插件实现特定于列的搜索过滤器？

DataTables是一个现代 jQuery 插件，用于向网页的 HTML 表格添加交互式和高级控件。它是一个非常易于使用的插件，具有多种选项供开发人员根据应用程序的需要进行自定义更改。该插件的功能包括分页、排序、搜索和多列排序。

在本文中，我们将演示使用DataTables插件实现特定于列的搜索过滤器。不是对整个表进行搜索操作，而是只对特定的列进行搜索，以提高系统的性能

方法：在下面的例子中，数据表使用学生的详细信息从HTML表作为主要来源。表中的每一行显示一个学生信息的详细信息。

• 一个 DataTable 被初始化。
• 开发人员可以根据需要设置分页或搜索的功能，如代码的脚本部分所示。
• column() API 用于选择表的所有列。
• flatten() API 用于将二维数组结构转换为一维数组，而each()方法用于对每个选定的列执行任何操作。
• 选择列表附加到每个列标题。
• 对任何列表值的更改执行任何操作。
• column().search() API 用于搜索选定的值， draw() API 用于反映表中操作后的变化。
• column().cache() API 用于通过 sort()方法从列中获取数据以显示排序后的数据。
• 对每一列都完成了所有步骤。

需要实现的预编译文件是

• CSS CDN：

  https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css

• JavaScript CDN：

  https://code.jquery.com/jquery-3.5.1.js
  https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js

示例：以下示例演示了上述方法，显示了特定于列的搜索过滤器操作。

HTML

  

  
  
  
  
  
  
  
  
    
  
  
  
  
  
    td {
      text-align: center;
    }
  

  

  
    Column specific search filter
    using DataTables plugin
  
  
  
  
    
      
        
        
        
        
        
      
    
    
      
        
        
        
        
        
      
      
        
        
        
        
        
      
      
        
        
  
        
        
        
      
      
        
        
        
        
        
      
      
        
        
        
        
        
      
      
        
        
        
        
        
      
      
        
        
        
        
        
      
      
        
        
        
        
        
      
      
        
        
        
        
        
      
      
        
        
        
        
        
      
  
      
        
        
        
        
        
      
      
        
        
        
        
        
      
    
  StudentIDStudentNameAgeGenderMarks ScoredST1Prema35Female320ST2Wincy36Female170ST3Ashmita41Female860ST4Kelina32Female433ST5Satvik41male162ST6William37Female372ST7Chandan31male375ST8David45male327ST9Harry29male205ST10Frost29male300ST14Fiza31Female750ST15Silva34male985
  
  
  
  
      /* Initialization of datatables */
      $(document).ready(function () {
  
        // Paging and other information are
        // disabled if required, set to true
        var myTable = $("#tableID").DataTable({
          paging: false,
          searching: true,
          info: false,
        });
  
        // 2d array is converted to 1D array
        // structure the actions are 
        // implemented on EACH column
        myTable
          .columns()
          .flatten()
          .each(function (colID) {
  
            // Create the select list in the
            // header column header
            // On change of the list values,
            // perform search operation
            var mySelectList = $("<select />")
              .appendTo(myTable.column(colID).header())
              .on("change", function () {
                myTable.column(colID).search($(this).val());
  
                // update the changes using draw() method
                myTable.column(colID).draw();
              });
  
            // Get the search cached data for the
            // first column add to the select list
            // usinh append() method
            // sort the data to display to user
            // all steps are done for EACH column
            myTable
              .column(colID)
              .cache("search")
              .sort()
              .each(function (param) {
                mySelectList.append(
                  $('<option value="' + param + '">'
                    + param + "</option>")
                );
              });
          });
      });
  

  

输出：