Question

我正在尝试使用数据表和可编辑的插件创建一个可编辑的小表。表格内容来自php。

这是我的html文件的外观：我不确定开头的所有包含是否都是必要的。

    <!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>

我的test.php文件看起来像这样，并为表创建输入数据：

<?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);
?>

test.php创建的json文件如下所示：

[{"bli":"a","bla":"b","blu":"c"},{"bli":"d","bla":"e","blu":"f"},{"bli":"g","bla":"h","blu":"i"}]

我得到的结果是表格如何预期，但它不可编辑。当我双击一个单元格时，它不会改变任何东西。

如果你能给我一些提示，那就太好了。

非常感谢。

使用带有json输入的datatable editable-plugin

0 个答案: