2 个自定义组合框，在 DataTables 中过滤结果，获取 2 个组合框来过滤结果的问题 - JavaScript，jQuery

Question

我的任务是创建一个包含两个自定义组合框的数据表页面。不幸的是，这没有灵活性，它们必须定制，但必须对应于它们各自的列。我无法让这两个组合框过滤下面的结果。我知道我的代码是错误的，但这是我现在所在的位置。为清楚起见，我希望能够同时使用两个组合框来过滤结果（例如：仅显示伦敦的项目经理）。

HTML

 <select id="dropdown1">
    <option value="">Select Position</option>
    <option value="Investigator">Investigator</option>
    <option value="Project Manager">Project Manager</option>
    <option value="Data Analyst">Data Analyst</option>
    <option value="Data Manager">Data Manager</option>
    <option value="Other">Other</option>
    </select>

<select id="dropdown2">
    <option value="">Select Office</option>
    <option value="London">London</option>
    <option value="San Francisco">San Francisco</option>
    </select>

<br>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>Investigator</td>
                <td>Edinburgh</td>
                <td>61</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Investigator</td>
                <td>Tokyo</td>
                <td>63</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Project Manager, Data Analyst</td>
                <td>San Francisco</td>
                <td>66</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Data Manager</td>
                <td>London</td>
                <td>22</td>
            </tr>
            <tr>
                <td>Jim Kelly</td>
                <td>Investigator, other</td>
                <td>London</td>
                <td>22</td>
            </tr>
              </tbody>
    </table>

JavaScript


    $(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Qlfrtip'});

     $('#dropdown1').on('change', function () {
                    table.columns(1).search( this.value ).draw();
                } );
                $('#dropdown2').on('change', function () {
                    table.columns(2).search( this.value ).draw();
                } );
});

Answer 1

问题是您在 jQuery 事件中调用 table.columns().search( this.value ).draw();，但您从未初始化 table 变量。

要解决此问题，请将 $(document).ready(function() { 中的 $('#example').DataTable 更改为 var table = $('#example').DataTable

查看这个工作示例：

    $(document).ready(function() {
    var table = $('#example').DataTable( {
        dom: 'Qlfrtip'
        });

     $('#dropdown1').on('change', function () {
                    table.columns(1).search( this.value ).draw();
                } );
                $('#dropdown2').on('change', function () {
                    table.columns(2).search( this.value ).draw();
                } );
});

<head>
<!--Styles-->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/autofill/2.3.7/css/autoFill.dataTables.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.1/css/dataTables.dateTime.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/keytable/2.6.4/css/keyTable.dataTables.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.1.3/css/rowGroup.dataTables.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css"/>
        <!--Scripts-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/autofill/2.3.7/js/dataTables.autoFill.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/datetime/1.1.1/js/dataTables.dateTime.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/keytable/2.6.4/js/dataTables.keyTable.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.1.3/js/dataTables.rowGroup.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
    </head>
<select id="dropdown1">
    <option value="">Select Position</option>
    <option value="Investigator">Investigator</option>
    <option value="Project Manager">Project Manager</option>
    <option value="Data Analyst">Data Analyst</option>
    <option value="Data Manager">Data Manager</option>
    <option value="Other">Other</option>
    </select>

<select id="dropdown2">
    <option value="">Select Office</option>
    <option value="London">London</option>
    <option value="San Francisco">San Francisco</option>
    </select>

<br>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>Investigator</td>
                <td>Edinburgh</td>
                <td>61</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Investigator</td>
                <td>Tokyo</td>
                <td>63</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Project Manager, Data Analyst</td>
                <td>San Francisco</td>
                <td>66</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Data Manager</td>
                <td>London</td>
                <td>22</td>
            </tr>
            <tr>
                <td>Jim Kelly</td>
                <td>Investigator, other</td>
                <td>London</td>
                <td>22</td>
            </tr>
              </tbody>
    </table>

2 个自定义组合框，在 DataTables 中过滤结果，获取 2 个组合框来过滤结果的问题 - JavaScript，jQuery

2 custom combo boxes, filter results in DataTables, issue getting 2 combo boxes to filter results - JavaScript, jQuery

html

javascript

jquery

datatables