如何仅点击DataTable排序图标触发排序，避免点击列名触发？

方法一：阻止搜索框的点击事件冒泡 #

DataTable默认将排序触发绑定在整个表头<th>元素上，搜索框嵌套在<th>内时，点击事件会向上冒泡到<th>从而触发排序。只需要给搜索框添加事件阻止冒泡即可：

假设搜索框的类名为column-search，用jQuery实现：

$('.column-search').on('click', function(e) {
    e.stopPropagation(); // 阻止事件冒泡到父级<th>元素
});

原生JS实现版本：

document.querySelectorAll('.column-search').forEach(input => {
    input.addEventListener('click', function(e) {
        e.stopPropagation();
    });
});

方法二：修改DataTable排序触发区域 #

如果需要更精准控制，可解绑表头默认的排序点击事件，仅让排序图标触发排序：

// 初始化DataTable实例
let table = $('#your-table-id').DataTable();

// 移除<th>上的默认排序点击事件
table.table().header().querySelectorAll('th').forEach(th => {
    $(th).off('click.DT');
});

// 给排序图标绑定自定义排序逻辑
table.table().header().querySelectorAll('th .sorting, th .sorting_asc, th .sorting_desc').forEach(icon => {
    $(icon).on('click', function() {
        const th = $(this).closest('th');
        const columnIndex = th.index();
        // 获取当前列排序状态并切换
        const currentOrder = table.order()[0];
        const newOrder = (currentOrder && currentOrder[0] === columnIndex && currentOrder[1] === 'asc') ? 'desc' : 'asc';
        // 执行排序并刷新表格
        table.order([[columnIndex, newOrder]]).draw();
    });
});

优先建议 #

方法一实现简单且不破坏DataTable原有逻辑，是最直接的解决方案，优先使用。

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