如何在 DataTables 中的表内选择元素使用搜索？

问题描述

在我的表格中，我在选择元素中预填了表单数据。有没有办法允许搜索方法 - 单个列搜索（选择输入）和常规表搜索仅包括预填充（选定）项目？我不太关心多选元素，只关心下拉元素。

数据表：

<table id="waiting" class="display">
        <thead>
            <tr>
                <th>Name</th>
                
                    <th class="locations">Location</th>
                
                <th>Roles</th>
                <th>Registration Date</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            
                <tr class="user">
                    <td>User 1</td>
                    
                        <td>
                            <select name="location-1" class="locations-list">
                                <option  value="CHI">Chicago</option>
                                <option  value="DC">DC</option>
                                <option  value="LA">LA</option>
                                <option  value="NYC">NY</option>
                                <option selected value="WC">WC</option>
                            </select>
                        </td>
                    
                    <td>
                        <select name="role-1" class="roles-list" multiple required>
                            <option  value="MAN">Manager</option>
                            <option selected value="INS">Insurance</option>
                            <option  value="OFF">Office</option>
                        </select>
                    </td>
                    <td>Feb. 19,2021</td>
                    <td>
                        
                            <button type="submit" class="btn btn-primary" name="submit" value="activation-1">Deactivate</button>
                        
                    </td>
                </tr>
        
                <tr class="user">
                    <td>User 2</td>
                    
                        <td>
                            <select name="location-6" class="locations-list">
                                <option  value="CHI">Chicago</option>
                                <option  value="DC">DC</option>
                                <option  value="LA">LA</option>
                                <option  value="NYC">NY</option>
                                <option  value="WC">WC</option>
                            </select>
                        </td>
                    
                    <td>
                        <select name="role-6" class="roles-list" multiple required>
                            <option selected value="MAN">Insurance</option>
                            <option  value="INS">Instructor</option>
                            <option selected value="OFF">Office</option>
                        </select>
                    </td>
                    <td>Feb. 11,2021</td>
                    <td>
                        
                            <button type="submit" class="btn btn-primary" name="submit" value="activation-6">Deactivate</button>
                        
                    </td>
                </tr>
        </tbody>
    </table>

当前的 js - 它几乎直接从 DataTables example 中提取：

$(document).ready(function() {
    $('#waiting').DataTable( {
            columnDefs: [
                { orderable: false,targets: [2,4] }
            ],"order": [[ 3,"asc" ],[1,"asc"]],initComplete: function () {
                $('#waiting tbody tr td.dataTables_empty')
                $(this).children('tbody').children('tr').children('td.dataTables_empty')
                if (! $('#waiting tbody tr td.dataTables_empty').length) {
                    this.api().columns(cols).every( function () {
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo( $(column.header()) )
                            .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>' )
                        });
                    });
                } else {
                $('#waiting tfoot').remove();
                };
            }
        });
    });

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）