如何禁用DataTable特定列的location.href跳转功能

嘿，这个问题很常见，我来帮你搞定！

目前你的行点击事件绑定在了所有<td>元素上，所以哪怕点击第二列里的复选框，也会触发跳转逻辑。我们可以通过两种方式来解决这个问题：

方法一：直接排除第二列（索引1）的点击事件 #

在点击事件里判断当前点击的<td>对应的列索引，如果是第二列（DataTables的列索引从0开始，所以第二列是1），就直接跳过跳转逻辑：

$(document).ready(function() {
    var table = $('#grid1').DataTable();
    $('#grid1').on( "click", "td", function (e) {
        // 获取当前单元格的列索引
        var columnIndex = table.cell(this).index().column;
        
        // 如果是第二列（索引为1），直接返回不执行跳转
        if (columnIndex === 1) {
            return;
        }
        
        var rowIdx = table.row( this ).index();
        var sData = table.cells({ row: rowIdx, column: 5 }).data()[0];
        if (sData && sData.length) {
            location.href = './test.php?id=' + sData;
        }
    });
});

方法二：仅排除复选框相关元素的触发 #

如果你希望第二列里除了复选框之外的其他元素（如果有的话）依然能触发跳转，可以判断点击的目标是否是复选框或者它的父容器，然后阻止事件冒泡：

$(document).ready(function() {
    var table = $('#grid1').DataTable();
    $('#grid1').on( "click", "td", function (e) {
        // 检查点击的元素是否属于复选框组件
        if ($(e.target).closest('.sel1, .c-checkbox').length > 0) {
            // 阻止事件向上冒泡到<td>，避免触发跳转
            e.stopPropagation();
            return;
        }
        
        var rowIdx = table.row( this ).index();
        var sData = table.cells({ row: rowIdx, column: 5 }).data()[0];
        if (sData && sData.length) {
            location.href = './test.php?id=' + sData;
        }
    });
});

另外提醒你一下，在初始化DataTable的脚本里，你写的$('grid1')应该改成$('#grid1')（ID选择器需要加#），不然初始化会失败哦。

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