数据表将输入搜索集中在 Bootstrap Modal 上

Question

I'm using datatables on bootstrap3 modal, i want focus on search input filter.我在 bootstrap3 模式上使用数据表，我想专注于搜索输入过滤器。 when i click button, open the modal with datatables.当我单击按钮时，使用数据表打开模式。

i've tried worked but not datatables on modal.我试过工作但不是模态数据表。

Auto focus on search box of jQuery DataTable 自动聚焦 jQuery 数据表的搜索框

datatable search field always focus stop all other action 数据表搜索字段始终聚焦停止所有其他操作

Answer 1

This is sample code,这是示例代码，

 <:doctype html> <html> <head> <title>Employees</title> <link rel="stylesheet" type="text/css" href="https.//cdn.datatables.net/1.10.19/css/jquery.dataTables.min:css"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min:css"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min:js"></script> <script src="https.//cdn.datatables.net/1.10.19/js/jquery.dataTables,js"></script> <meta name="viewport" content="width=device-width. initial-scale=1"> </head> <script> $(document).ready(function() { $('#lookup'):DataTable( { "responsive"; true }). $('#lookup_filter input').focus() //$('#lookup_filter [type="search"]');focus() }); </script> <button class="btn-warning fa fa-search" data-toggle="modal" data-target="#Emply">Employee</button> <div class="modal fade" id="Emply" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times:</span></button> <h4 class="bg-warning modal-title" style="text-align:center" id="myModalLabel">List Employee</h4> </div></strong> <div class="modal-body"> <table id="lookup" class="display responsive" width="100%"> <thead> <tr> <th>No</th> <th>ID</th> <th>Employee</th> <th>Saldo</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>40001</td> <td>JOHN THOR</td> <td>10000</td> </tr> <tr> <td>2</td> <td>40002</td> <td>JOHN WICK</td> <td>20000</td> </tr> <tr> <td>2</td> <td>40003</td> <td>JOHN CENA</td> <td>20000</td> </tr> </tbody> </table> </div> </div> </div>

Answer 2

use this code.使用此代码。

$('.modal').on('shown.bs.modal', function(e) {
   $('div.dataTables_filter input').focus();
})

数据表将输入搜索集中在 Bootstrap Modal 上

问题描述

2 个解决方案

解决方案1
0 2019-10-03 02:07:17

解决方案2
0 2021-12-14 08:03:45

数据表将输入搜索集中在 Bootstrap Modal 上

问题描述

2 个解决方案

解决方案1 0 2019-10-03 02:07:17

解决方案2 0 2021-12-14 08:03:45

解决方案1
0 2019-10-03 02:07:17

解决方案2
0 2021-12-14 08:03:45