PrimeFaces DataTable列切换JQuery脚本异常：点击按钮后列未按预期隐藏

看起来你遇到的是PrimeFaces DataTable列切换时旧列未隐藏、新列正常显示的异常情况，结合PrimeFaces组件的特性，我梳理了几个最可能的问题点和对应的解决方案：

1. 错误使用服务器端visible属性导致DOM状态异常 #

如果你的XHTML中给vote2、vote1列设置了visible="#{bean.vote2Visible}"且初始值为false，服务器端不会把这些列的DOM元素（包括表头th和表体td）渲染到页面上。这种情况下，你用jQuery的show()能正常显示新列是巧合（可能你后来调整过属性），但vote3列的隐藏失败是因为PrimeFaces的组件状态和你手动修改的DOM状态发生了冲突。

解决办法：
把所有列的visible属性都设为true，然后用PrimeFaces的客户端API在页面加载时初始化列可见性：

<p:dataTable id="voteTable" widgetVar="voteTableWV">
    <p:column id="vote3Col" headerText="Vote3">
        <p:commandButton value="切换到Vote2" onclick="switchToVote2(); return false;"/>
    </p:column>
    <p:column id="vote2Col" headerText="Vote2">
        <p:commandButton value="切换到Vote1" onclick="switchToVote1(); return false;"/>
    </p:column>
    <p:column id="vote1Col" headerText="Vote1">
        <p:commandButton value="完成"/>
    </p:column>
</p:dataTable>

<script>
// 页面加载完成后初始化列可见性
$(document).ready(function() {
    const tableWidget = PF('voteTableWV');
    tableWidget.hideCol('voteTable:vote2Col');
    tableWidget.hideCol('voteTable:vote1Col');
});

function switchToVote2() {
    const tableWidget = PF('voteTableWV');
    tableWidget.hideCol('voteTable:vote3Col');
    tableWidget.showCol('voteTable:vote2Col');
}

function switchToVote1() {
    const tableWidget = PF('voteTableWV');
    tableWidget.hideCol('voteTable:vote2Col');
    tableWidget.showCol('voteTable:vote1Col');
}
</script>

2. 直接操作DOM时未处理表头和表体的所有元素 #

PrimeFaces的列由**表头的th和表体每行的td**共同组成，如果你只隐藏其中一类元素，视觉上列看起来还是“存在”的，这就是你看到vote3列没隐藏的原因。

解决办法：
修改jQuery选择器，同时选中对应列的th和td：

// 隐藏vote3列（表头+所有行单元格）
$('th[id$="vote3Col"], td[id$="vote3Col"]').hide();
// 显示vote2列（表头+所有行单元格）
$('th[id$="vote2Col"], td[id$="vote2Col"]').show();

3. 按钮的默认AJAX请求重置了DOM状态 #

p:commandButton默认会发起AJAX请求，哪怕你没指定action，它也会触发页面部分刷新，导致你手动修改的DOM状态被重置（比如vote3列刚被隐藏，AJAX刷新后又恢复显示）。

解决办法：
在按钮的onclick事件末尾加上return false;，阻止默认的AJAX请求：

<p:commandButton value="切换到Vote2" onclick="switchToVote2(); return false;"/>

或者直接改用无AJAX的普通按钮p:button：

<p:button value="切换到Vote2" onclick="switchToVote2();"/>

4. 选择器匹配错误 #

PrimeFaces的组件ID是命名容器拼接的（比如DataTable的ID是voteTable，列的完整ID是voteTable:vote3Col），如果你的jQuery选择器只写了#vote3Col，是无法匹配到目标元素的。

解决办法：
用属性选择器匹配ID结尾的部分：[id$="vote3Col"]，确保能正确选中对应列的所有元素。

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