数据表 tabIndex 选项

DataTables是一个 jQuery 插件，可用于向网页的 HTML 表格添加交互式和高级控件。这也允许根据用户的需要对表中的数据进行搜索、排序和过滤。 DataTable 还公开了一个强大的 API，可以进一步用于修改数据的显示方式。

tabIndex选项用于指定在页面上可选择表格控件的流程顺序。此选项可用于否决此流程并更改使用键盘与页面交互的方式。默认情况下，DataTable 将有一个已经分配给它的 tabIndex ，以便无需使用鼠标即可访问控件。

-1 的值意味着表格的内置导航将被禁用并阻止使用键盘来导航页面。

{ tabIndex: value }

参数：此选项具有如上所述和下文所述的单个值。

• value：这是一个整数值，指定使用tab键时表的流向。默认值为 0。

下面的示例说明了此选项的使用。

示例 1：在此示例中，第一个表的tabIndex设置为 2，第二个表的tabIndex设置为 1，因此在第一个表之前选择第二个表的控件。

HTML

  
  
  
 
  
  
 
  
  
  


  
    GeeksForGeeks
  
  DataTables tabIndex Option
 
  
  
    
      
        
        
        
      
    
    
      
        
        
        
      
      
        
        
        
      
      
        
        
        
      
      
        
        
        
      
      
        
        
        
      
    
  DayNameAge2Patricia222Caleb471Abigail485Rahim445Sheila22
  
   
  
  
    
      
        
        
        
      
    
    
      
        
        
        
      
      
        
        
        
      
      
        
        
        
      
      
        
        
        
      
      
        
        
        
      
    
  DayNameAge2Patricia222Caleb471Abigail485Rahim445Sheila22
  
 
    // Initialize the DataTable
    $(document).ready(function () {
      $('#tableID').DataTable({
 
        info: false,
        paging: false,
        searching: false,
 
        // Specify the tabindex value for
        // selecting the controls of the table
        tabIndex: 2,
      });
 
      $('#tableID2').DataTable({
 
        info: false,
        paging: false,
        searching: false,
 
        // Specify the tabindex value for
        // selecting the controls of the table
        tabIndex: 1,
      });
    });
  

输出：

示例 2：在此示例中，第一个表的tabIndex设置为 -1，因此在文档流中无法选择第一个表。

HTML

  
  
  
 
  
  
 
  
  
  


  
    GeeksForGeeks
  
  DataTables tabIndex Option
 
  
  
    
      
        
        
        
      
    
    
      
        
        
        
      
      
        
        
        
      
      
        
        
        
      
      
        
        
        
      
      
        
        
        
      
    
  DayNameAge2Patricia222Caleb471Abigail485Rahim445Sheila22
  
   
  
  
    
      
        
        
        
      
    
    
      
        
        
        
      
      
        
        
        
      
      
        
        
        
      
      
        
        
        
      
      
        
        
        
      
    
  DayNameAge2Patricia222Caleb471Abigail485Rahim445Sheila22
  
 
    // Initialize the DataTable
    $(document).ready(function () {
      $('#tableID').DataTable({
 
        info: false,
        paging: false,
        searching: false,
 
        // Disable the selecting of the
        // controls of the table
        tabIndex: -1,
      });
 
      $('#tableID2').DataTable({
 
        info: false,
        paging: false,
        searching: false,
 
        // Specify the tabindex value for
        // selecting the controls of the table
        tabIndex: 0,
      });
    });
  

输出：

第一个表不可选

参考：

https://datatables.net/reference/option/tabIndex