jquery - 使用 dataTable 的显示/隐藏功能时更改链接文本

Question

我正在使用 dataTable 脚本轻松地对从我的数据库中提取的数据进行排序，并使用它们的内置函数来显示/隐藏某些列：

        function fnShowHide(iCol) {
        var oTable = $('#inventory').dataTable();
        var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
        oTable.fnSetColumnVis( iCol, bVis ? false : true );
    }
<a href="javascript:void(0);" class="cost" onclick="fnShowHide(10);">Cost</a>

问题是，我如何做到这一点，如果该列被隐藏，则链接文本显示“显示成本”，如果该列可见，则显示“隐藏成本”？

Answer 1

也许这会奏效。看来您正在将列索引分配给 onclick 属性，也许将 id 添加到锚点以用作访问器；就像是：

function fnShowHide(iCol) {
        var oTable = $('#inventory').dataTable();
        var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
        oTable.fnSetColumnVis( iCol, bVis ? false : true );

        //--anchor text modifier
        var $anchor = $('#anchor_' + iCol);
        var albl = $anchor.text();
        if(albl.indexOf('Show')!=-1 || albl.indexOf('Hide')!=-1 ){
          albl = (bVis)? albl.replace('Show', 'Hide') : albl.replace('Hide', 'Show');
        }else{
          albl = (bVis)? 'Hide ' + albl : 'Show ' + albl; 
        }
        $anchor.text(albl)
    }
<a href="javascript:void(0);" class="cost" 
id="anchor_10" onclick="fnShowHide(10);">Cost</a>

我的语法有错误：应用于以下行的更改应该会产生您正在寻找的结果：

    if(albl.indexOf('Show')!=-1 || albl.indexOf('Hide')!=-1 ){
 /*this is affected line*/ albl = (bVis)? albl.replace('Show', 'Hide') : albl.replace('Hide', 'Show');
    }else{