Я создаю таблицу с использованием DataTables. Мне нужно иметь возможность выбрать несколько (~ 200) строк из таблицы для помещения в вывод. Я хотел бы реализовать функциональность сортировки, описанную здесь для флажков:
Оставьте включенные флажки в верхней части jQuery DataTables, несмотря на порядок сортировки
Но при использовании данных, которые поступают с Ajax.
Кроме того, когда отмеченные элементы перемещаются вверх, я хочу, чтобы отображались два входа формы ... ИЛИ может быть проще просто отобразить столбцы Класс и Категория в качестве входов формы и иметь значения по умолчанию быть заполненным из базы данных. (Раскрывающийся список всех текущих возможностей базы данных был бы лучше, но с возможностью ввода пользовательского значения.)
https://datatables.net/examples/api/form.html
* добавив это, я помню, чтобы вернуться и посмотреть на это завтра
http://jsfiddle.net/obmghyo7/
Оттуда при отправке любая проверенная строка будет иметь имя, класс, категорию, сохраненные в выводе csv.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css" media="screen" />
<script charset="utf8" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
</head>
</html>
<body>
<table id="samples" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th></th>
<th>Sample Name</th>
<th>Region/Program</th>
<th>Class</th>
<th>Category</th>
<th>QC_comment</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td>Sample Name</td>
<td>Region/Program</td>
<td>Class</td>
<td>Category</td>
<td>QC_comment</td>
</tr>
</tfoot>
</table>
</form>
<script type="text/javascript" charset="utf8" src="JS/datatables.js"></script>
</body>
JQUERY (datatables.js)
$(document).ready(function() {
$('#samples').DataTable( {
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0,
data: null,
defaultContent: ''
} ],
select: {
style: 'multi',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]],
"processing": true,
"serverSide": true,
"pageLength": -1,
"lengthMenu": [[100, 250, 500, -1], [100, 250, 500, "All"]],
"ajax": "datatables.php"
} );
} );
PHP (datatables.php)
<?php
$table = 'sample';
$primaryKey = 'Name';
$columns = array(
array( 'db' => 'Name', 'dt' => 1 ),
array( 'db' => 'Region', 'dt' => 2 ),
array( 'db' => 'Class', 'dt' => 3 ),
array( 'db' => 'Category', 'dt' => 4 ),
array( 'db' => 'QC_flag','dt' => 6,),
array('db' => 'QC_comment','dt' => 5,)
);
// SQL server connection information
$sql_details = array(
'user' => 'user',
'pass' => 'password',
'db' => 'test',
'host' => 'xxx.xx.xxx.xx'
);
require( 'ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);