Как выбрать строки из таблицы данных jQuery, которая использует вызов AJAX

Я работаю над приложением C# ASP.NET Core MVC и использую таблицу данных jQuery для отображения данных из базы данных. Проблема в том, что я не могу выбрать одну или несколько строк в этой таблице.

У меня есть такая таблица в моем .cshtml:

<table class = "table display table-bordered" id = "DATATABLE">
</table>

Это в теге скрипта:

$("#DATATABLE").DataTable({
    serverSide: true,
    filter: true,
    searchDelay: 1000,
    scrollY: StaticData.TABLE_HEIGHT + 'px',
    lengthMenu: StaticData.TABLE_PAGE_SIZE,
    language: { searchPlaceholder: "Name, Teacher" },
    scrollCollapse: true,
    ajax: {
        url: '/STUD_MANAGEMENT/LoadStud',
        type: 'GET',
        datatype: 'json',
        headers: { 'RequestVerificationToken': 'your json token' },
        data: (d) => {                    
            return { draw: d.draw, start: d.start, length: d.length, search: d.search.value, FilterByColumn: d.columns[d.order[0].column].data, ASC_DSEC: d.order[0].dir }
        },
        beforeSend: () => { ShowLoader(); },
        complete: () => { HideLoader(); },
        dataSrc: (json) => {
            json = json.data;                    
            return json;
        }
    },
    columnDefs: [{ className: "dt-center", targets: [5, 6, 7, 8, 11], width: '2%', }],
    columns: [
        { data: 'STUD_ID', title: 'STUD ID', autoWidth: false, visible: false },
        { data: 'CLASS_ID', title: 'CLASS ID', autoWidth: false, visible: false },
        { data: 'NAME', title: 'Name', autoWidth: true, searchable: true },
        { data: 'AGE', title: 'Age', autoWidth: true },
        { data: 'TEACHER', title: 'Teacher', autoWidth: true },               
    ]            
 });

А метод LoadStud() в контроллере STUD_MANAGEMENT показан здесь:

public IActionResult LoadStud(int draw = 1, int start = 0, int length = 10, 
                              string search = "", string FilterByColumn = "", string ASC_DSEC = "")
{
    List<STUD_MANAGEMENT> ListData = new List<STUD_MANAGEMENT>();

    int recordsTotal = 0;            

    STUD_MANAGEMENT dm = new STUD_MANAGEMENT();
    dm.STUD_ID = 1;
    dm.CLASS_ID = 1;
    dm.NAME = "James";
    dm.TEACHER = "SEPHORA";
    dm.AGE = "12";

    STUD_MANAGEMENT dm1 = new STUD_MANAGEMENT();
    dm1.STUD_ID = 2;
    dm1.CLASS_ID = 2;
    dm1.NAME = "Naneem";
    dm1.TEACHER = "Chithra";
    dm1.AGE = "15";

    STUD_MANAGEMENT dm11 = new STUD_MANAGEMENT();
    dm11.STUD_ID = 3;
    dm11.CLASS_ID = 3;
    dm11.NAME = "Sony";
    dm11.TEACHER = "Mano USA";
    dm11.AGE = "3";            

    ListData.Add(dm);
    ListData.Add(dm1);
    ListData.Add(dm11);

    recordsTotal = ListData.Count();                    

    var jsonData = new { draw = draw, 
                         recordsFiltered = recordsTotal, 
                         recordsTotal = recordsTotal, 
                         data = ListData };
    return Ok(jsonData);
}

Это класс STUD_MANAGEMENT:

public class STUD_MANAGEMENT
{             
    public int STUD_ID { get; set; }
    public int CLASS_ID { get; set; }      
    public string NAME { get; set; }
    public int AGE { get; set; }   
    public string TEACHER { get; set; }
} 

Я хочу выбрать одну/несколько строк в этой таблице данных и предположим, что рядом с этой таблицей данных есть кнопка, и onclick() этой кнопки должен вернуть выбранную строку (строки) этой таблицы данных.

Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
0
75
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Я хочу выбрать одну/несколько строк в этой таблице данных и предположим, что что рядом с этой таблицей данных есть кнопка и onclick() этого Кнопка должна возвращать выбранные строки этой таблицы данных.

Вам следует настроить поддержку многострочного выбора с помощью select: { style: 'multi' }.

var table = $('#DATATABLE').DataTable({
                select: {
                    style: 'multi' // support multi-row selection
                },
                ...
            });

Затем вы можете добавить кнопку под таблицей:

<button id = "getSelectedRows">getSelectedRows</button>

Чтобы правильно получить данные выбранной строки при нажатии кнопки, используйте класс .selected для управления состоянием выбора строки, добавляя или удаляя выбранный класс:

$('#DATATABLE tbody').on('click', 'tr', function () {
    $(this).toggleClass('selected');
});

$('#getSelectedRows').on('click', function () {
    var selectedRows = table.rows('.selected').data(); // Get the data of the selected rows.
    var selectedData = [];

    // Iterate through the selected row data.
    selectedRows.each(function (value, index) {
        selectedData.push(value);
    });

    // Verify if it is correct.
    alert('the selected rows data:\n' + JSON.stringify(selectedData, null, 2));
});

Редактировать:

Но select: {style: 'multi'} не выбирает ни одну строку в моем таблицу данных при нажатии на нее.

Это может быть связано с различиями версий. Ниже приведены версии, которые я использую:

<!-- jQuery -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- DataTables CSS -->
<link rel = "stylesheet" href = "https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css" />

<!-- DataTables JS -->
<script src = "https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>

Мой результат теста:

Привет @Yumiao Kong, спасибо за ответ. Но select: {style: 'multi'} не выбирает ни одну строку в моей таблице данных при нажатии на нее. Это не работает. },

KitKat 29.08.2024 12:57

@KitKat, я добавил свои справочные ссылки и результаты теста, вы можете попробовать.

Yumiao Kong 30.08.2024 05:20

DataTables Select — это библиотека расширений для DataTables. Чтобы использовать его, необходимо импортировать библиотеку:

<link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/select/1.7.0/css/select.dataTables.min.css"/>

<script type = "text/javascript" src = "https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js"></script>

Я считаю, что версия 1.7.0 должна быть совместима с версией DataTables 1.x.x.

Если загруженный пакет DataTables включает файлы DataTables Select, вы можете импортировать их из локального файла, а не с веб-сайта CDNJS. В противном случае вы можете загрузить пакет DataTables, включив библиотеку Select, но, похоже, он загружается только с последней версией (DataTables 2.1.4). Библиотека Select будет включена в файл datatables.js/datatables.min.js, и вам не нужно будет импортировать библиотеку извне, как я это сделал выше.

И включите настройку множественного выбора в DataTables:

var dataTableOptions = {
  select: {
    style: 'multi',
  },
  ...
};

Демо @ StackBlitz

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