数据表过滤器下拉列表未正确显示

Posted 2023-05-08

【中文标题】数据表过滤器下拉列表未正确显示

【英文标题】：Datatable filter dropdown not showing correctly

【发布时间】：2020-11-27 17:32:20

【问题描述】：

我正在尝试为我的每一列显示过滤器下拉列表。某些列正确显示 unqiue 值。但是，我的过滤器下拉列表中有 3 个未正确显示。在这 3 列中，我在 <td> 中包含了隐藏输入字段，这是必要的，因为我正在使用 JS 来检查来自隐藏输入的数据值是否在一定范围内。 <td> 将根据条件改变颜色。但是，这导致我的 3 过滤器下拉显示来自隐藏输入的值，这不是我所希望的。无论如何可以提供帮助吗？以下是我的代码。

PHP 代码：

    <table id="pic_table" class="table" class="display">
                        <thead>
                            <tr>
                                <th class="filterhead"></th>
                                <th class="filterhead"></th>
                                <th class="filterhead"></th>
                                <th class="filterhead"></th>
                                <th class="filterhead"></th>
                                <th class="filterhead"></th>
                                <th class="filterhead"></th>
                            </tr>
                            <tr>
                                <th>Serial</th>
                                <th>Name</th>
                                <th>Project Reference</th>
                                <th>Basic Profile</th>
                                <th>Employment Permits</th>                 
                                <th>Last Updated</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                <?php
                  .....................

                     while($row = sqlsrv_fetch_array( $sql_stmt, SQLSRV_FETCH_NUMERIC))
        
                            echo"<tr>";
                            echo "<td>".$row[0]."</td>";
                            echo "<td class='name_col'>".$row[1]."</td>";
                            echo "<td class='prbk'><input type='hidden' class='pr' name='pr' value='".$row[3]."'>".$row[3]."%</td>";
                            echo "<td class='bpbk'><input type='hidden' class='bp' name='bp' value='".$row[4]."'>".$row[4]."%</td>";
                            echo "<td class='epbk'><input type='hidden' class='ep' name='ep' value='".$row[5]."'>".$row[5]."%</td>";                    
                            echo "<td>".$row[2]->format("d M Y")."</td>";
                            echo "<td id='status'></td>";
                            echo "</tr>";    
        
                  
             ?>
</tbody>
</table>

JS：

 $(document).ready( function ()               
          $('#pic_table').DataTable(
        
                initComplete: function () 
        
                        var i = 0;
                                this.api().columns().every( function () 
                                    var column = this;
                                    var select = $('<select><option value="">All</option></select>')
                                        .appendTo( $('.filterhead').eq(i).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>' )
                                     );
                                    i++;
                                 );        
                
                
            );
    );

错误截图：

【问题讨论】：

我认为您不需要隐藏输入，这不是输入的用途。将css class 添加到该行或查看data- 属性。然后，您可以根据元素包含的类或数据属性来查找和排序元素。如果我自己这样做，data-attr 将是可行的方法

检查 hidden 属性是否正在通过 jQuery 修改函数传递 - 您可能可以将其重新添加到那里作为一个稍微不雅的修复。

【参考方案1】：

感谢 jameson2012。根据您的建议，我通过用<td> 中的数据属性替换我的隐藏输入字段使其工作。以下是我的简单解决方案。

 echo "<td class='prbk' data-id='".$row[3]."'>".$row[3]."%</td>";
 echo "<td class='bpbk' data-id='".$row[4]."'>".$row[4]."%</td>";
 echo "<td class='epbk' data-id='".$row[5]."'>".$row[5]."%</td>";