在 Datatable 上设置自动对焦 - $.focus() 不进行更改

Question

我想将自动对焦设置为 table 的第一个 select 输入。但是，由于 select 输入是由 DataTables 创建的，我必须在 select 输入和 table 由 DataTables 呈现之后调用 jQuery 函数。我正在尝试使用 $("#autofocus_on_load").focus() 来解决这个问题。但它没有进行任何更改，或者至少没有关注 select 输入..

怎么可能？ - 你们对此有什么解决方案吗？

var table;

$(document).ready(function() {
  table = $('#assignment_overview_table').DataTable( {
    "displayStart": 0,
    "language": {
      "url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/German.json"
    },
    "processing": true,
    "pageLength": 100,
    "bSortCellsTop": true,
    "fixedHeader": true,
    initComplete: function () {
      this.api().columns().every( function () {
        var column = this;
        var select = $('<select><option value=""></option></select>');
        select.appendTo( $(column.header()).empty() )

        select.on( 'click', function(e) {
          e.stopPropagation();
        } );


        select.on( 'change', function () {
          var val = $.fn.dataTable.util.escapeRegex(
            $(this).val()
          );

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

        column.data().unique().sort().each( function ( d, j ) {
          select.append( '<option value="'+d+'">'+d+'</option>' )
        } );
      } );
    },
  });

  table.on('draw', function () {
    table.columns().indexes().each( function ( idx ) {
      var select = $(table.column( idx ).header()).find('select');

      if ( select.val() === '' ) {
        select
          .empty()
          .append('<option value=""/>');

        table.column(idx, {search:'applied'}).data().unique().sort().each( function ( d, j ) {
          select.append( '<option value="'+d+'">'+d+'</option>' );
        } );
      }
    } );
  } );


  $("#autofocus_on_load > select").focus();
} );

<script src="https://code.jquery.com/jquery-3.1.0.js"></script><script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">

<table class="table table-striped table-bordered" id="assignment_overview_table">
<thead>
      <tr>
        <th id="autofocus_on_load">ID</th>
        <th>NAME</th>
        <th>SURNAME</th>
        <th>CASTE</th>
        <th>EXTRA</th>
      </tr>
      <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>SURNAME</th>
        <th>CASTE</th>
        <th>EXTRA</th>
      </tr>
    </thead>
    <tbody>
    <tr>
      <td>1</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
    </tr>
    <tr>
      <td>2</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
    </tr>
    <tr>
      <td>3</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
    </tr>
    <tr>
      <td>4</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
    </tr>
    <tr>
      <td>5</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
      <td>xyz</td>
    </tr>
    </tbody>
</table>

谨致问候，谢谢！

Answer 1

我可以看到您正在为不可聚焦的 <th> 元素分配一个 ID #autofocus_on_load。你应该使用 <input type="text" autofocus="true" />

Or Same 我相信您不能使用 id 或 class 选择器进行动态 DOM 渲染。您可以改用 EventListener。试试这个。我希望这对你有用

Answer 2

只需移动这一行：

 $("#autofocus_on_load > select").focus();

到 initComplete 结束。

你的 <select> 在那之前不存在。

在 Datatable 上设置自动对焦 - $.focus() 不进行更改

Set autofocus on Datatable - $.focus() not making changes

html

javascript

jquery

focus

datatables