我正在使用 Datatables 制作网页，我应该用它来控制 MySQL 表(一个非常普通的任务)。有件事我不知道为什么它不起作用。我想在我的表中添加一列，其中包含复选框，以便稍后我可以使用这些复选框和一些 javascript 代码对行进行一些操作。 无论如何，这是我的代码:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Process manager</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/bootstrap/navbar-static-top.css" rel="stylesheet">
<!-- DataTables bootstrap CSS -->
<link href="css/dataTables/dataTables.bootstrap.css" rel="stylesheet">
</head>
<body>
<table id="processManager" class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th>process</th>
<th>Resource</th>
<th>Category</th>
<th>Format</th>
<th>Automaticity</th>
<th>Process_type</th>
<th>Access</th>
<th>Source</th>
<th>A</th>
<th>B</th>
<th>status_A</th>
<th>status_B</th>
<th>time_A</th>
<th>time_B</th>
<th>exec_A</th>
<th>exec_B</th>
<th>period</th>
<th>overtime</th>
<th>param</th>
<th>last_update</th>
<th>last_triples</th>
<th>error</th>
<th>description</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>process</th>
<th>Resource</th>
<th>Category</th>
<th>Format</th>
<th>Automaticity</th>
<th>Process_type</th>
<th>Access</th>
<th>Source</th>
<th>A</th>
<th>B</th>
<th>status_A</th>
<th>status_B</th>
<th>time_A</th>
<th>time_B</th>
<th>exec_A</th>
<th>exec_B</th>
<th>period</th>
<th>overtime</th>
<th>param</th>
<th>last_update</th>
<th>last_triples</th>
<th>error</th>
<th>description</th>
</tr>
</tfoot>
</table>
<script src="js/jquery/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/dataTables/jquery-1.10.1.dataTables.min.js"></script>
<script src="js/dataTables/dataTables.bootstrap.js"></script>
<script>
$(document).ready( function loadData() {
processManager = $('#processManager').DataTable( {
"ajax": {
url: "getSingleTable.php",
},
"columns": [
{
"orderable": false,
// Create an HTML select with all the versions of the data
//TODO Correggi +01
"data": function (row, type, val, meta) {
return '<input type="checkbox"/>';
}
},
{ "data": "Process ID" },
{ "data": "Resource" },
{ "data": "Category" },
{ "data": "Format" },
{ "data": "Automaticity" },
{ "data": "Process type" },
{ "data": "Access" },
{ "data": "Source" },
{ "data": "A" },
{ "data": "B" },
{ "data": "Status A" },
{ "data": "Status B" },
{ "data": "Time A" },
{ "data": "Time B" },
{ "data": "Exec A" },
{ "data": "Exec B" },
{ "data": "Period" },
{ "data": "Overtime" },
{ "data": "Parameters" },
{ "data": "Last Update" },
{ "data": "Last Triples" },
{ "data": "Error" },
{ "data": "Description" }
],
"language": {
"decimal": ",",
"thousands": "."
},
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"order": [[0, 'asc']],
"pagingType": "full_numbers",
"processing": true,
"serverSide": true,
"stateSave": true
} );
});
</script>
</body>
</html>
getSingleTable.php
<?php
// DB table to use
// $table = 'process_manager';
$table = 'process_manager2';
// Table's primary key
// $primaryKey = 'Process';
$primaryKey = 'Process';
// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case simple
// indexes
$columns = array (
array (
'db' => 'process',
'dt' => 'Process ID'
),
array (
'db' => 'Resource',
'dt' => 'Resource'
),
array (
'db' => 'Category',
'dt' => 'Category'
),
array (
'db' => 'Format',
'dt' => 'Format'
),
array (
'db' => 'Automaticity',
'dt' => 'Automaticity'
),
array (
'db' => 'Process_type',
'dt' => 'Process type'
),
array (
'db' => 'Access',
'dt' => 'Access'
),
array (
'db' => 'Source',
'dt' => 'Source'
),
array (
'db' => 'A',
'dt' => 'A'
),
array (
'db' => 'B',
'dt' => 'B'
),
array (
'db' => 'status_A',
'dt' => 'Status A'
),
array (
'db' => 'status_B',
'dt' => 'Status B'
),
array (
'db' => 'time_A',
'dt' => 'Time A'
),
array (
'db' => 'time_B',
'dt' => 'Time B'
),
array (
'db' => 'exec_A',
'dt' => 'Exec A'
),
array (
'db' => 'exec_B',
'dt' => 'Exec B'
),
array (
'db' => 'period',
'dt' => 'Period'
),
array (
'db' => 'overtime',
'dt' => 'Overtime'
),
array (
'db' => 'param',
'dt' => 'Parameters'
),
array (
'db' => 'last_update',
'dt' => 'Last Update'
),
array (
'db' => 'last_triples',
'dt' => 'Last Triples'
),
array (
'db' => 'error',
'dt' => 'Error'
),
array (
'db' => 'description',
'dt' => 'Description'
)
);
// SQL server connection information
$sql_details = array (
'user' => 'USER',
'pass' => 'PASS',
'db' => 'DB',
'host' => 'IP'
);
require ('ssp.class.php');
echo json_encode ( SSP::simple ( $_GET, $sql_details, $table, $primaryKey, $columns ) );
当然，我输入的是真实值，而不是“USER”、“PASS”、“DB”和“IP”。 如果我不尝试放置复选框，一切都会正常工作。 正如你所看到的，我试图将复选框放在第一列“process”之前，这应该是 MySQL 表中唯一不存在的列。 有人知道出了什么问题吗？
最佳答案
您应该将函数放入 render 参数而不是 data 参数中。 data 用于您不需要的列名称。
"orderable": false,
// Create an HTML select with all the versions of the data
//TODO Correggi +01
"render": function (row, type, val, meta) {
return '<input type="checkbox"/>';
}
关于javascript - 使用数据表添加复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26094142/