DataTable 不接受来自数据库的 json
Posted
技术标签:
【中文标题】DataTable 不接受来自数据库的 json【英文标题】：DataTable not accepting json from database 【发布时间】：2018-09-27 19:16:01 【问题描述】：我想在我的网站上设置一个数据表，我找到了一个我想使用的表here，我一直在尝试将它转换为我需要的。我在这项努力中没有取得太大的成功。我目前的情况是该表未填充数据库表中的行，并且我收到 json 响应错误。我可以打开检查器查看查询数据库返回json数据的php文件，我可以看到我正在以格式返回数据
"data":[
"ssn":"100192686","dob":"1977-02-01","fn":"Latoyia","mi":"H","ln":"Herdon",
"ssn":"100263201","dob":"1962-06-15","fn":"Adena","mi":"M","ln":"Couch"
]
根据 json 验证器，它是有效的 json，但是当我重新加载页面时出现错误
"table id=example - Invalid JSON response".
如果 json 数据格式正确但没有正确返回，我该怎么办？这是该项目的gihub。我已经包含了我正在使用的 mysql 数据库文件以及一个包含 XHR 结果的文本文件。我觉得这行 $('#example').DataTable( javascript 是我的问题所在
<?php
include_once 'header.php';
?>
<script src = 'https://code.jquery.com/jquery-1.12.4.js'></script>
<script src = 'https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>
<script src = 'https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js'></script>
<script src = 'https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js'></script>
<script src = 'JS/dataTables.editor.min.js'></script>
<link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel = "stylesheet" href = "https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
<link rel = "stylesheet" href = "https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css">
<link rel = "stylesheet" href = "https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">
<section class="main-container">
<div class="main-wrapper">
<h2>Home</h2>
<?php
if (isset($_SESSION['u_id']))
$sql = "SELECT * FROM employee;";
$result = mysqli_query($conn,$sql);
$resultCheck = mysqli_num_rows($result);
if($resultCheck > 0)
echo
"<table id='example' class='display' cellspacing='0' width='100%'>
<thead>
<tr>
<th></th>
<th>ssn</th>
<th>dob</th>
<th>first</th>
<th>MI</th>
<th>last</th>
</tr>
</thead>";
?>
</div>
</section>
<script>
console.log("In the script open");
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function()
editor = new $.fn.dataTable.Editor(
ajax: "infograb.php",
table: "#example",
fields: [
label: "Social#:",
name: "ssn",
label: "DOB:",
name: "dob",
label: "First Name:",
name: "fn",
label: "Middle Initial:",
name: "mi",
label: "Last Name:",
name: "ln"
]
);
$('#example').on( 'click', 'tbody td', function (e)
var index = $(this).index();
if ( index === 1 )
editor.bubble( this, ['fn', 'mi', 'ln'],
title: 'Edit name:'
);
else if ( index === 2 )
editor.bubble( this,
buttons: false
);
else if ( index === 3 )
editor.bubble( this );
);
var testData = [
"ssn": "98727748",
"dob": "2016-02-05",
"fn": "jake",
"mi": "a",
"ln": "butler"
];
$('#example').DataTable(
dom: "Bfrtip",
ajax:
url: 'infograb.php',
type: 'POST',
data:
json: JSON.stringify( "data": testData )
,
dataSrc: 'data'
,
columns: [
//sets the checkbox
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
,
data: "dob" ,
data: "ssn" ,
data: "fn" ,
data: "mi" ,
data: "ln" ,
],
order: [ 1, 'asc' ],
select:
style: 'os',
selector: 'td:first-child'
,
buttons: [
extend: "create", editor: editor ,
extend: "edit", editor: editor ,
extend: "remove", editor: editor
]
);
);
console.log("End script");
</script>
<?php
include_once 'footer.php';
?>
这是查询数据库并返回（据称）json数据的php文件
<?php
include_once 'dbconn.php';
$rows = array();
$sql = "SELECT * FROM employee";
$result = $conn->query($sql) or die("cannot write");
while($row = $result->fetch_assoc())
$rows[] = $row;
echo "<pre>";
print json_encode(array('data'=>$rows));
echo "</pre>";
?>
我已经在这里工作了大约 24 小时，我觉得我在这里犯了一个愚蠢的错误，我只是想不通。在这一点上，任何帮助都会让我跌落悬崖。
【问题讨论】：
【参考方案1】：数据表可能会很痛苦，确保您尽可能多地阅读它们提供的文档是值得的。
我可以看到 2 个问题在您的代码上运行而无需运行测试。第一个是 infograb.php 不会保存发送给它的任何数据，因为它所做的只是在加载时返回数据。其次，您正在使用数据表的启动代码来尝试发送数据（可能是用于内联编辑，因为您似乎不需要为请求的数据发送任何变量）。我的第一步是退后一步：
ajax:
url: 'infograb.php',
type: 'POST',
data:
json: JSON.stringify( "data": testData )
,
dataSrc: 'data'
,
应该回到
ajax:
url: 'infograb.php',
,
从 infograb.php 中删除 pre 标签，因为它们是不必要的。
这应该会为您将数据加载到表中。然后你就可以开始编辑工作了。
值得阅读和记录：
Ajax sourced data
PHP libraries
DataTables Editor 1.7.3 - PHP 5.3+ libraries
【讨论】：
当我说 pre 标签实际上有所帮助，出于某种原因，我只得到了表中的最后一行，pre 标签解决了它。但是随着您建议的更改，现在没有必要了。我现在正在填充表格，但是单击会导致行标识符错误 dataTables.editor.min.js:10 Uncaught Unable to find row identifier 有关更多信息，请参阅datatables.net/tn/14 但根据您在回答中所说的，我认为这是意料之中的，我现在正在寻找解决方案。感谢您的帮助。 没问题，我有很多关于数据表的问题，如果你能掌握它们，它们就很棒。假设 ssn 对于每一行都是唯一的（鉴于 ssn 的性质），您可以在编辑器部分进行更新 editor = new $.fn.dataTable.Editor( ajax: "infograb.php", table: "#example" , idSrc: 'ssn', 或者，您可以向 json 添加数据库标识符，例如自动增量 ID，并使用它来更具体地更新数据库，但由您决定。 我按照错误链接找到了 idSrc: 'what to use for id' 我正在使用它（你对文档的力量是正确的！）现在我正在处理编辑和删除按钮不起作用，添加不会添加新员工，但它会再次读取原来的 2500 名员工。如果我无法弄清楚我的按钮问题，我会将这个问题标记为已解决并询问另一个问题，再次感谢所有帮助和有用的资源！ 它再次添加整个列表，因为您要求它。 editor = new $.fn.dataTable.Editor( ajax: "infograb.php", 然后在 "infograb.php" 你没有收到任何 $_POST 字段。以上是关于DataTable 不接受来自数据库的 json的主要内容，如果未能解决你的问题，请参考以下文章
jstree做动态树,json格式传输,存储过程获得datatable之类,不知道如何把datatable转换为需要的json数据格式
将 JSON 数据显示到 DataTable Flutter
DataTable 不接受 MySQL 表中的 DateTime 字段