我有此表(从控制器spring mvc和thymeleaf对象生成的数据)。我想从数据表的多个页面中选择数据。并选中第二列中所有值的复选框(如表中所示,其名称为“ ID”)。我该怎么办?
$(document).ready(function(){
var mytable = $("#maliste").DataTable({
'columnDefs': [
{
'targets': 0,
className: 'select-checkbox',
'checkboxes': {
'selectRow': true
}
}
],
'select': {
'style': 'multi'
},
'order': [[1, 'asc']],
fixedHeader: true,
searching : true,
deferRender: true,
paging : true,
bProcessing : true,
dom : 'iftlrp'
});
$('#selection').click( function () {
//i want to have informations here
} );
这里是html表格:
<p><button id="selection" class="btn btn-danger"> THIS IS BUTTON TO GET SELECTION</button> <br></p>
<table id="maliste" class="table table-striped table-bordered table-sm table-hover">
<thead>
<tr>
<th></th><!-- FOR CHECKBOXES -->
<th>ID</th>
<th>STRUCTURE</th>
<th>CLIENT</th>
<th>ANNEE</th>
</tr>
</thead>
<tr th:each="boite : ${liste}">
<td ></td>
<td th:text="${boite.id}"></td>
<td th:text="${boite.structure}"></td>
<td th:text="${boite.client}"></td>
<td th:text="${boite.annee}" style="white-space: pre-line"></td>
</tr>
<tfoot>
<tr>
<th></th><!-- FOR CHECKBOXES -->
<th>ID</th>
<th>STRUCTURE</th>
<th>CLIENT</th>
<th>ANNEE</th>
</tr>
</tfoot>
</table>
这里是页面外观,我想在单击按钮以获取ID列表并将其发送到控制器时将其发送到localhost:8080 / send_ids
您可以使用DataTables api检索选定的行数据。
请参见https://datatables.net/extensions/select/examples/api/get.html
和https://datatables.net/extensions/select/examples/api/select.html
var mytable = $('#maliste').DataTable({ ... });
$('#selection').on('click', function() {
// Get selection
var selectedRows = mytable.rows({ selected: true });
// Get selection column data
var selectedData = selectedRows.data();
// Get 2nd column values
var selectedIDs = $.map(selectedData, function(row) {
return row[ 1 ];
});
console.log(selectedIDs);
});
这将从第二列打印一个值数组。
在此处查看我的工作示例:https://jsfiddle.net/3ew1go6p/