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

【问题标题】：Datatables focus input search on Bootstrap Modal数据表将输入搜索集中在 Bootstrap Modal 上
【发布时间】：2019-10-03 01:52:18
【问题描述】：

我在 bootstrap3 模式上使用数据表，我想专注于搜索输入过滤器。当我单击按钮时，使用数据表打开模式。

我已经尝试过工作但不是模态数据表。

Auto focus on search box of jQuery DataTable

datatable search field always focus stop all other action

【问题讨论】：

标签： javascript php twitter-bootstrap-3

【解决方案1】：

这是示例代码，

<!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>

【讨论】：

【解决方案2】：

使用此代码。

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

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。