点击表格Search Results按钮后如何将焦点移至搜索结果

我正在开发一个包含「Search Results」按钮的数据表格页面，想在用户点击该按钮后，把焦点设置到搜索结果区域（比如“Showing X number of entries”文本或条目数下拉菜单），让用户明确知晓页面已更新搜索结果，请问该如何实现？

核心思路 #

DataTables表格渲染是异步操作，需在表格绘制完成（draw事件触发后）再执行聚焦逻辑，确保目标元素已完成更新。

实现方案 #

方案1：聚焦到条目数下拉菜单（推荐）

DataTables默认的条目数下拉菜单是可聚焦元素，直接调用focus()即可：

$('#myInput').on('click', function () {
  // 绘制表格，完成后执行聚焦
  table.draw(false, function() {
    $('#example_length select').focus();
  });
});

方案2：聚焦到“Showing X entries”文本

文本元素默认不可聚焦，需先添加tabindex="-1"（允许聚焦但不参与Tab键导航），再执行聚焦：

$('#myInput').on('click', function () {
  table.draw(false, function() {
    $('#example_info').attr('tabindex', '-1').focus();
  });
});

补充说明 #

• table.draw(false)中的false表示保留当前分页位置，若需跳转到第一页，可改为true
• 若希望所有表格更新（筛选、排序等）都触发聚焦，可全局监听draw事件：

table.on('draw', function() {
  $('#example_length select').focus();
});

修改后的完整JS代码 #

$(document).ready(function() {
  var table = $('#example').DataTable({
    
    responsive: true,
    searching: true,
    
    columnDefs: [
            {
                target: 6,
                visible: false,
                searchable: true,
            }
      ],
    
    dom: 'Bifrtip',
        buttons: [
            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'pdfHtml5',
                orientation: 'landscape',
                exportOptions: {
                    columns: ':visible'
                     }
              },           
            {
                extend: 'print',
                exportOptions: {
                    columns: ':visible'
                }
               },
        //  'colvis'
        ],
  });

  buildSelect(table);
 
  table.on('draw search', function() {
    buildSelect(table);
  });
         
$('#myInput').on( 'click', function () {
  table.draw(false, function() {
    // 选择你需要的聚焦目标，注释掉另一个即可
    $('#example_length select').focus();
    // $('#example_info').attr('tabindex', '-1').focus();
  }); 
} );
          
  $('#test').on('click', function() {
    table.search('').columns().search('').draw();
  });
});

function buildSelect(table) {
  var counter = 0;
  table.columns([0, 1, 2]).every(function() {
    var column = table.column(this, {
      search: 'applied'
    });
    counter++;
    var select = $('<select><option value="">select me</option></select>')
      .appendTo($('#dropdown' + counter).empty())
      .on('change', function() {
        var val = $.fn.dataTable.util.escapeRegex(
          $(this).val()
        );

        column
          .search(val ? '^' + val + '$' : '', true, false);
          //.draw();
      });

    if ( column.index() === 0 ) {
      var filteredNames = column.data().unique().toArray();
      ['Garrett', 'Test1', 'Ashton'].forEach((d) => {
        if (filteredNames.includes(d)) {
          select.append('<option value="' + d + '">' + d + '</option>');
        }
      });
    } else {
      column.data().unique().sort().each(function(d, j) {
        select.append('<option value="' + d + '">' + d + '</option>');
      });
    }

    var currSearch = column.search();
    if (currSearch) {
      select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
    }
  });
}

内容的提问来源于stack exchange，提问作者newuser