Я использую ASP.NET Core 6 MVC C#. У меня есть такая таблица:
<div class = "card-body">
<table class = "table display table-bordered" id = "DATATABLE"></table>
</div>
У меня есть класс Student со свойствами StudID (int - PrimaryID), Name (string), Class (int). А таблица выглядит вот так.
На рисунке выше значение класса 9 — это гиперссылка, а 100 — это PrimaryID этой строки.
Я ищу способ получить PrimaryID при нажатии на 9.
То, что я пробовал, показано ниже.
$("#DATATABLE").DataTable({
serverSide: true,
filter: true,
searchDelay: 1000,
scrollY: StaticData.TABLE_HEIGHT + 'px',
lengthMenu: StaticData.TABLE_PAGE_SIZE,
scrollCollapse: true,
ajax: {
url: '/STUD_MANAGEMENT/LoadStudents',
type: 'GET',
datatype: 'json',
headers: { 'RequestVerificationToken': 'your json token' },
dataSrc: (json) => {
json = json.data;
return json;
}
},
columnDefs: [{ className: "dt-center", targets: [3], width: '2%', }],
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 = "' + data + '" onclick = "clickLink()">' + data + '</a>';
}
return data;
}
}
],
});
function clickLink() {
alert('studid is ??? ');
}
🤔 А знаете ли вы, что...
С JavaScript можно создавать интерактивные формы и проверять введенные пользователем данные.
Вам необходимо отправить дополнительную информацию в render
этой колонки (через data
).
Попробуйте код ниже:
$("#DATATABLE").DataTable({
serverSide: true,
filter: true,
searchDelay: 1000,
scrollY: StaticData.TABLE_HEIGHT + 'px',
lengthMenu: StaticData.TABLE_PAGE_SIZE,
scrollCollapse: true,
ajax: {
url: '/STUD_MANAGEMENT/LoadStudents',
type: 'GET',
datatype: 'json',
headers: { 'RequestVerificationToken': 'your json token' },
dataSrc: (json) => {
json = json.data;
return json;
}
},
columnDefs: [{ className: "dt-center", targets: [3], width: '2%', }],
columns: [
{ data: 'STUD_ID', title: 'Stud ID', autoWidth: false, visible : false },
{ data: 'NAME', title: 'Name', autoWidth: true },
{ data: null, title: 'Class', autoWidth: true,
"render": function(data, type, row, meta){
if (type === 'display')
{
data = '<a href = "' + data.CLASS + '" onclick = "clickLink('+data.STUD_ID+')">' + data.CLASS + '</a>';
}
return data;
}
}
],
});
function clickLink(id) {
alert('studid is '+id);
}