Я работаю над приложением 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() этой кнопки должен вернуть выбранную строку (строки) этой таблицы данных.
Я хочу выбрать одну/несколько строк в этой таблице данных и предположим, что что рядом с этой таблицей данных есть кнопка и 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>
Мой результат теста:
@KitKat, я добавил свои справочные ссылки и результаты теста, вы можете попробовать.
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',
},
...
};
Привет @Yumiao Kong, спасибо за ответ. Но select: {style: 'multi'} не выбирает ни одну строку в моей таблице данных при нажатии на нее. Это не работает. },