Я работаю над веб-приложением с React front и Spring Boot back. Я использую datatables с нумерацией на стороне сервера (пружинный контроллер и все такое). Это работает, чтобы увидеть таблицу и разные страницы. Однако теперь я хотел бы нажать на строку, чтобы выбрать ее идентификатор. Я пытался следовать различным примерам из таблиц данных, но он всегда возвращается пустым. Я также установил datatables. net -select-bs4 через npm, может быть, я могу использовать его как-нибудь? Извините, я новичок в данных. Что у меня сейчас (спереди):
import React, { Component } from 'react'
import '../dataTables.min.css';
const $ = require('jquery');
$.DataTable = require('datatables.net-bs4');
export default class Table extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
var selected = [];
var table = $('#paginatedTable').DataTable( {
"dom": '<"data-table-wrapper"t>',
"processing": true,
"serverSide": true,
"pageLength": 5,
"ajax": {
"url": "/map-runner/api/calculations",
"data": function (data) {
}},
"columns": this.props.columns,
"rowCallback": function(row, data) {
if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
$(row).addClass('selected');
}
}
});
$('#paginatedTable tbody').on('click', 'tr', function () {
var id = this.id;
var index = $.inArray(id, selected);
if (index === -1) {
selected.push(id);
} else {
selected.splice(index, 1);
}
$(this).toggleClass('selected');
console.log(table.rows( { selected: true } ));
} );
}
componentWillUnmount() {
$('.data-table-wrapper').find('table').DataTable().destroy(true);
}
render() {
return (
<div class="container">
<div class="starter-template">
<div class="table-responsive">
<table id="paginatedTable" class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Date Create</th>
<th>Date Update</th>
<th>User ID</th>
<th>ID Type</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
)
}
}