在 DataTables 列过滤选择上设置占位符

Posted 2023-05-08

【中文标题】在 DataTables 列过滤选择上设置占位符

【英文标题】：Set placeholder on DataTables column filtering select

【发布时间】：2020-06-24 12:41:36

【问题描述】：

我正在使用 DataTables 来显示“提供者”列表

我已启用列过滤模块，它会在列上方显示“选择”框。

如何将表格标题显示为选择的占位符？

这是当前选择的屏幕截图：

这是我想要的结果

这是我的代码

<script>
    $(document).ready(function() 
    $('#Table').DataTable( 
        "pagingType": "full_numbers",
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, 100, "All"]],
        "lengthChange": false,
        language:  
            search: "",
            searchPlaceholder: "Search Providers",
        ,
        "ordering": false,
        initComplete: function () 
            this.api().columns().every( function () 
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.header()).empty() )
                    .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>' )
                 );
             );
        
     );
    $('div.dataTables_filter input').addClass('form-control');
    $('div.dataTables_filter input').placeholder = "Search Providers";
    $( "select" ).addClass( "form-control" );
 );
</script>

<div class="kt-container kt-grid__item kt-grid__item--fluid">
    <div class="row">
        <div class="col-md-12">        
            <div class="kt-portlet">
                <div class="kt-portlet__body">
                    <div class="kt-section">
                        <div class="kt-section__content">
                            <table class="table" id="Table">
                                <thead>
                                    <tr>
                                        <th>Provider</th>
                                        <th>Type</th>
                                        <th>Location</th>
                                        <th>Phone</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    % for item in records %
                                        <tr>
                                            <td> item.title </td>
                                            <td> item.type </td>
                                            <td>
                                                 item.city 
                                            </td>
                                            <td> item.phone </td>
                                        </tr>
                                    % endfor %
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

看看this question - 其中一个答案应该可以满足您的需求。

这些列是由DataTables动态生成的，所以我不能手动添加oen

【参考方案1】：

此方法使用以下行来获取列标题的值：

var colTitle = this.header().innerhtml;

然后它使用占位符技术/技巧将该值放入您的选择控件中：

var select = $('<select><option value="" disabled selected>' + colTitle + '</option></select>')

因此，您问题中的相关部分最终看起来像这样：

<script>
    $(document).ready(function() 
    $('#Table').DataTable( 
        "pagingType": "full_numbers",
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, 100, "All"]],
        "lengthChange": false,
        language:  
            search: "",
            searchPlaceholder: "Search Providers",
        ,
        "ordering": false,
        initComplete: function () 
            this.api().columns().every( function () 
                var column = this;
                var colTitle = this.header().innerHTML;
                var select = $('<select><option value="" disabled selected>' + colTitle + '</option></select>')
                    .appendTo( $(column.header()).empty() )
                    .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>' )
                 );
             );
        
     );
    $('div.dataTables_filter input').addClass('form-control');
    $('div.dataTables_filter input').placeholder = "Search Providers";
    $( "select" ).addClass( "form-control" );
 );
</script>

您最终的行为是：占位符文本是下拉列表的一部分，位于列表顶部，但显示为灰色 - 并且无法选择。

注意事项：

1）如果你想看到“Provider Name”，而不是“Provider”在第一列选择控件，然后更改相关表标题中的值：

<th>Provider</th>

2) 我不知道这与您需要在每个下拉列表中填充其余值的方式相互作用（我的是一个独立的测试文件，不使用引导程序） - 所以提前道歉如果它不能让你一直得到你想要的。