I'm trying to create a little editable table with datatables and the editable plugin. The table content comes via php.
This is how my html file looks: I am not sure if all the includes at the beginning are necessary.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://intranet/rd_reporting/jquery.min.js"></script>
<link rel="stylesheet" href="http://intranet/rd_reporting/bootstrap.min.css">
<link rel="stylesheet" href="http://intranet/rd_reporting/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css">
<script src="http://intranet/rd_reporting/bootstrap.min.js"></script>
<script src="http://intranet/rd_reporting/jquery.jeditable.js" type="text/javascript"></script>
<script src="http://intranet/rd_reporting/jquery-ui.js" type="text/javascript"></script>
<script src="http://intranet/rd_reporting/jquery.validate.js" type="text/javascript"></script>
<script src="http://intranet/rd_reporting/jquery.dataTables.editable.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#myDataTable').dataTable
(
{
"sAjaxSource": "test.php",
"sAjaxDataProp": "",
"aoColumns": [
{ "mData": "bli" },
{ "mData": "bla" },
{ "mData": "blu" }
]
}
).makeEditable
({
"height": "100%",
"width": "100%",
}
);
});
</script>
<table id="myDataTable">
<thead>
<tr>
<th>Company name</th>
<th>Address</th>
<th>Town</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
My test.php-file looks like that and creates the input data for the table:
<?php
mysql_connect("localhost", "TA", "pass") or die (mysql_error ());
mysql_select_db("r&d_reporting") or die(mysql_error());
$strSQL = " SELECT * FROM `test` WHERE 1 ";
$rs = mysql_query($strSQL);
$rows = array();
while($r = mysql_fetch_assoc($rs)){
$rows[] = $r;
}
echo json_encode($rows);
?>
The json-file which is created by test.php looks like:
[{"bli":"a","bla":"b","blu":"c"},{"bli":"d","bla":"e","blu":"f"},{"bli":"g","bla":"h","blu":"i"}]
The result I get is a table how ich expected it, but it is not editable. When I doubleclick on a cell it won't change anything.
Would be nice if you could give me some hints.
Thank you very much.
