Как получить значение PrimaryID данных при нажатии на значение ссылки в таблице данных

Я использую 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 ??? ');
        }

Учитывая, что в предоставленной таблице первый столбец обозначен как StudID, почему вы сопоставляете данные с STUD_ID?

fdomn-m 10.04.2024 20:13
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
57
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам необходимо отправить дополнительную информацию в 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);
    }

Как в приведенном выше коде можно запретить переход на другую страницу и в то же время вызвать всплывающее дочернее окно при нажатии на кнопку ссылки???

Jerry Mon 14.04.2024 17:41

Другие вопросы по теме