数据表单击表标题范围时启用/禁用列排序

Question

根据对相关问题的一些建议，我能够解除绑定并再次绑定默认列排序事件。

但当有一个或多个隐藏列时，以一种奇怪的排序行为结束。

期望的行为：

我在Databales列的TH内部有一个span，它必须打开一个带有远程url的bootstrap-modal。但是我不希望触发排序默认事件，所以onClick我放置了这个：$('th').off('click.DT');然后我有这个处理器来触发模态，然后绑定顺序再次监听没有问题：

$('body').on('click', '[data-toggle="modal"]', function(){
        $($(this).data("target")+' .modal-body').load($(this).data("remote"));
            table.columns().every( function (i) {               
             if(table.columns().visible()[i]){
                table.order.listener( $('#Testata th:eq('+i+')'), i);
             }
            });
    });`

当有隐藏的列时出现问题：有一个隐藏的列，即：`

'columnDefs': [          
            {
                "targets": [0],
                "visible": false
            }]`

订单监听器适用于所有列但排序错误。有一个以上隐藏的列，即：`

'columnDefs': [          
            {
                "targets": [0],
                "visible": false
            },
            {
                "targets": [3],
                "visible": false
            }
        ]`

订单监听器不适用于所有列，并且排序错误。

这里有一个模拟场景的fiddle，请点击第一列的（i）跨度。

非常感谢。

Answer 1

您需要分配一个仅计算可见列的运行编号：

$('body').on('click', '[data-toggle="modal"]', function(){
    $($(this).data("target")+' .modal-body').load($(this).data("remote"));
    var elIdx = 0;
    table.columns(':visible').every( function (i) {
        table.order.listener( $('#Testata th:eq('+elIdx+')'), i);
        elIdx++;
    });
});

jsFiddle