在Datatable上设置自动对焦 - $ .focus()不进行更改
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Datatable上设置自动对焦 - $ .focus()不进行更改相关的知识,希望对你有一定的参考价值。
我想将自动对焦设置为表格中的第一个选择输入。但是,因为选择输入是由DataTables创建的,我必须在选择输入之后调用jQuery函数,并且表由DataTables呈现。我想和$("#autofocus_on_load").focus()
一起尝试这个。但它没有做任何改变或者至少关注选择输入..
怎么可能? - 你们有什么解决方案吗?
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>
亲切的问候,谢谢!
答案
只需移动此行:
$("#autofocus_on_load > select").focus();
到initComplete
结束。
你的<select>
直到那时才存在。
另一答案
我可以看到你将一个ID #autofocus_on_load
分配给<th>
元素,这是无法集中的。你应该使用<input type="text" autofocus="true" />
或者相同我相信你不能使用id
或class
选择器进行动态DOM渲染。您可以改用EventListener。试试这个。我希望这对你有用
以上是关于在Datatable上设置自动对焦 - $ .focus()不进行更改的主要内容,如果未能解决你的问题,请参考以下文章