如何在HTML DataTable中隐藏筛选后全为空的列？

你添加的hideEmptyCols: true并不是DataTables的原生配置选项，所以不会生效。要实现筛选/搜索后自动隐藏所有无有效数据的列，可以通过监听表格的重绘事件，手动检查每列的显示行数据来实现。

完整实现代码 #

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css" />

<script>
    $(document).ready(function() {
        const table = $("#example").DataTable({
            buttons: ["columnsToggle"]
        });

        // 监听表格重绘事件（搜索、分页、排序都会触发）
        table.on('draw.dt', function() {
            // 遍历所有列
            table.columns().every(function() {
                const column = this;
                // 获取当前显示行的该列所有单元格节点
                const cells = column.nodes();
                // 判断是否所有单元格都无有效数据（这里将"-"、空字符串、纯空白视为无数据）
                const allEmpty = cells.toArray().every(cell => {
                    const text = $(cell).text().trim();
                    return text === '' || text === '-';
                });
                // 根据判断结果显示/隐藏列
                column.visible(!allEmpty);
            });
        });
    });
</script>

<table id="example" class="display" style="width: 100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Location</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Zenaida Frank</td>
            <td>Software Engineer</td>
            <td>New York</td>
            <td>63</td>
        </tr>
        <tr>
            <td>Zorita Serrano</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>56</td>
        </tr>
        <tr>
            <td>Jennifer Acosta</td>
            <td>Junior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>43</td>
        </tr>
        <tr>
            <td>Fiona Green</td>
            <td>Chief Operating Officer (COO)</td>
            <td>San Francisco</td>
            <td>-</td>
        </tr>
        <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
        </tr>
        <tr>
            <td>Herrod Chandler</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
        </tr>
        <tr>
            <td>Rhona Davidson</td>
            <td>Integration Specialist</td>
            <td>Tokyo</td>
            <td>55</td>
        </tr>
        <tr>
            <td>Jena Gaines</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>-</td>
        </tr>
    </tbody>
</table>

关键逻辑说明 #

1. 监听重绘事件：使用draw.dt事件，确保每次表格搜索、分页、排序后都执行列检查逻辑。
2. 遍历所有列：通过table.columns().every()循环处理每一列，适配多列场景。
3. 检查列数据有效性：
   • 用column.nodes()获取当前显示行的该列所有单元格（只包含当前分页/筛选后的可见行）
   • 自定义空值判断逻辑：这里把-、空字符串、纯空白都视为无有效数据，你可以根据业务需求调整判断条件。
4. 控制列显示：调用column.visible(!allEmpty)，如果全列无数据则隐藏，否则显示。

内容的提问来源于stack exchange，提问作者user20268089