数据表 - 添加单个列选择过滤会删除固定列

Posted 2023-05-07

【中文标题】数据表 - 添加单个列选择过滤会删除固定列

【英文标题】：Datatables - adding individual column select filtering removes fixed columns

【发布时间】：2018-12-16 14:21:44

【问题描述】：

我有一个 html 表格，我需要冻结标题，冻结 2 个左列，并显示过滤所有其他列（不是 2 个左列）的选项。当我自己做固定列时，它工作得很好。但是当我添加代码以包括列的下拉过滤时，固定列选项不起作用。知道如何解决这个问题吗？代码如下：

<script>
        $(document).ready(function () 
            $('#primary').DataTable(
                initComplete: function () 
                    this.api().columns([2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]).every(function () 
                        var column = this;
                        var select = $('<select><option value="">Show All</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) 
                            var val = $('<div/>').html(d).text();
                            select.append('<option value="' + val + '">' + val + '</option>');
                        );
                    );
                ,
                paging: false,
                sort: false,
                scrollY: 500,
                scrollX: true,
                select: true,
                fixedColumns: 
                    leftColumns: 2
                ,
                fixedHeader: 
                    header: true,
                ,

            );
        );
    </script>

html表格：

<table id="1" class="table table-striped">
    @if (Model.1Function != null)
    
        <thead>
            <tr>
                @foreach (DataColumn column in (Model.1Function as DataTable).Columns)
                
                    <th>@column.ColumnName.ToUpper()</th>//header row
                
            </tr>
        </thead>
        <tbody>
            @if ((Model.1Function as DataTable).Rows.Count > 0)
            
                foreach (DataRow dr in (Model.1Function as DataTable).Rows)
                
                    <tr>
                        @foreach (DataColumn column in (Model.1Function as DataTable).Columns)
                        
                            <td style="max-width:200px; white-space:normal">
                                @dr[column].ToString()
                            </td>//write one row at a time.
                        
                    </tr>
                
            
            else
            
                var count = (Model.1Function as DataTable).Columns.Count;
                <tr>
                    <td colspan='@count' style="color:red;">
                        No Data Found.
                    </td>
                </tr>
            
        </tbody>

    
    else
    
        <tr>
            <td style="color:red;">
                @(Model.1Function .HasErrors != false ? Model.1Function .HasErrors.ToString() : "")
            </td>
        </tr>
    
</table>

解决这个问题的任何帮助都会很棒。提前致谢。

【参考方案1】：

我不小心在 this.api().column 数组中添加了一个额外的列。这就是它失败的原因。一旦解决了这个问题。