ASP.NET Core 6 MVC中点击Datatable链接获取主键StudID的方法

核心思路 #

利用DataTable渲染列时提供的row对象，直接获取当前行的StudID，并传递给点击事件处理函数。

方法一：内联事件传递参数（快速修改） #

直接修改Class列的render函数，将当前行的StudID作为参数传入点击函数：

$("#DATATABLE").DataTable({
    // 其他原有配置保持不变
    columns: [
        { data: 'STUD_ID', title: 'Stud ID', autoWidth: false, visible : false },
        { data: 'NAME', title: 'Name', autoWidth: true },
        { data: "CLASS", title: 'Class', autoWidth: true,
            "render": function(data, type, row, meta){
                if(type === 'display')
                {
                    // 修改a标签，传递row.STUD_ID到clickLink，同时取消默认跳转
                    data = `<a href="javascript:void(0);" onclick="clickLink(${row.STUD_ID})">${data}</a>`;
                }
                return data;
            }
        }           
    ],
});

// 修改点击函数接收StudID参数
function clickLink(studId) {
    alert(`studid is ${studId}`);
}

方法二：事件委托（推荐，更符合JS最佳实践） #

避免使用内联事件，通过事件委托绑定点击事件，更灵活且易于维护：

1. 修改Class列的render函数，移除内联onclick，添加统一类名：

$("#DATATABLE").DataTable({
    // 其他原有配置保持不变
    columns: [
        { data: 'STUD_ID', title: 'Stud ID', autoWidth: false, visible : false },
        { data: 'NAME', title: 'Name', autoWidth: true },
        { data: "CLASS", title: 'Class', autoWidth: true,
            "render": function(data, type, row, meta){
                if(type === 'display')
                {
                    data = `<a href="javascript:void(0);" class="class-link">${data}</a>`;
                }
                return data;
            }
        }           
    ],
});

2. 在DataTable初始化后，绑定事件委托：

// 给表格绑定点击事件，监听.class-link的点击
$('#DATATABLE').on('click', '.class-link', function() {
    // 获取当前点击行的DataTable数据对象
    const currentRow = $('#DATATABLE').DataTable().row($(this).closest('tr'));
    const studId = currentRow.data().STUD_ID;
    alert(`studid is ${studId}`);
});

注意事项 #

• 确保后端接口返回的JSON数据中，主键字段的键为STUD_ID（与你配置的data: 'STUD_ID'一致），如果后端返回的是StudID，需要同步修改对应配置。
• 如果需要跳转到其他页面，可以将href修改为目标URL，并拼接StudID，例如：href="/Class/Detail?studId=${row.STUD_ID}"。

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