如何实现点击链接不跳转页面并重绘jQuery DataTable

架构老林

2026-9-2

问题根因

你写的代码之所以还会跳转，有两个核心问题：

内联onclick调用的onclickFunction没有返回false，也没有调用事件的preventDefault()方法，<a>标签的默认跳转行为没有被阻止
全局函数里的$(this)没有指向当前点击的链接，内联调用函数时上下文默认指向window，根本拿不到正确的href地址

另外你原有逻辑还有个隐藏bug：拼接请求地址时hasPayment传的是当前字段值，点击切换应该传相反的状态，否则后端收到的还是原有值，根本不会更新状态。

可直接运行的修复方案

推荐用事件委托的写法，不用在render函数里写内联事件，翻页重绘后事件不会失效，代码也更易维护：

先修改列配置：

{
    data: "HasPayment",
    render: function (data, type, row) {
        // 计算点击后要更新成的目标状态
        const targetState = !data;
        const requestUrl = '@Url.Action("Set", "Payment")?applicationId=' + row.Id + '&year=' + row.Year + '&month=' + row.Month + '&hasPayment=' + targetState;
        const icon = data ? "fa-check" : "fa-times";
        const color = data ? "green" : "red";
        // 把请求地址存在data属性里，不用href存跳转地址，从根源避免意外跳转
        return `<a href="javascript:;" data-request-url="${requestUrl}" class="payment-toggle fas fa-solid ${icon}" style="color: ${color}"></a>`;
    }
},

在DataTable初始化完成后，绑定委托点击事件：

// 把#yourTableId替换成你实际的表格元素ID
$('#yourTableId').on('click', '.payment-toggle', function (e) {
    e.preventDefault();
    const url = $(this).data('request-url');
    // 建议把后端/Payment/Set接口改成POST请求，修改数据用GET不符合规范，容易被误触发
    $.post(url, function () {
        // reload第二个参数传false，重绘时保留当前分页、筛选状态，不会跳回第一页
        paymentDataTable.ajax.reload(null, false);
    });
});

如果你不想改现有内联事件的写法，只需要做两处调整即可：

修改render里的a标签，把事件和当前元素传入点击函数：

return '<a href="' + paymentSet + '" onclick="return handlePaymentToggle(event, this)" class="fas fa-solid fa-check" style="color: green"></a>';

重写点击函数，阻止默认行为：

function handlePaymentToggle(e, el) {
    e.preventDefault();
    $.post(el.href, function () {
        paymentDataTable.ajax.reload(null, false);
    });
    return false;
}

优化建议

数据修改类接口不要用GET请求：GET请求设计为幂等操作（多次访问结果一致），如果用GET做更新，可能被浏览器预加载、爬虫爬取时意外修改数据，建议改成POST请求
ajax.reload()传入第二个参数false，重绘表格时会保留当前的分页、搜索、排序状态，用户体验更好

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