使用Ajax和PHP进行简单的DataTable初始化 [英] Simple DataTable initialization with Ajax and PHP
问题描述
我在使用Ajax和PHP初始化DataTable时遇到了一些麻烦.根据检查员的错误是:
I'm just having some trouble initializing a DataTable using Ajax and PHP. According to the inspector the error is:
Uncaught TypeError: Cannot read property 'length' of undefined jquery.dataTables.js:2649
(anonymous function) jquery.dataTables.js:2649
oSettings.jqXHR.$.ajax.success jquery.dataTables.js:8749
c jquery.js:3048
p.fireWith jquery.js:3160
k jquery.js:8235
r jquery.js:8778
我已按照datatable网站上的说明进行操作，但显然我做错了事.这不是php部分，我刚刚检查了一下，它返回的是json文件.
I've followed the instructions as on datatable website but apparently I'm doing something wrong. It's not the php part, I've just checked it and it is returning a json file.
这就是我所拥有的.
谢谢.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chromo Insiders</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="DataTables/media/js/jquery.dataTables.js"></script>
<script type="application/javascript" language="javascript" src="insiders.js"></script>
<link rel="stylesheet" type="text/css" href="ci_style.css" />
<style type="text/css">
@import 'DataTables/media/css/demo_table_jui.css';
</style>
</head>
<body>
<header>
<h1>Chromo Insiders</h1>
</header>
<table id="datatables">
<thead>
<tr>
<th>email</th>
<th>Last Name</th>
<th>First Name</th>
<th>Date Registered</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
这是脚本:
$(document).ready(function(e) {
$('#datatables').dataTable( {
"bProcessing": true,
"sAjaxSource": 'process.php'
} );
});
以防万一，您需要查看php代码:
Just in case you need to take a look to the php code:
<?php
try {
$conn = require_once 'dbConnect.php';
$sql = "SELECT email, lastName, firstName, state, dateRegistered FROM Users";
$result = $conn->prepare($sql) or die ($sql);
if(!$result->execute()) return false;
if($result->rowCount() > 0) {
$json = array();
while($row = $result->fetch()){
$json[] = array(
'email' => $row['email'],
'lastName' => $row['lastName'],
'firstName' => $row['firstName'],
'dateRegistered' => $row['dateRegistered'],
'state' => $row['state']
);
}
$json['success'] = true;
echo json_encode($json);
}
} catch(PDOException $e) {
echo 'Error: ' . $e->getMessage();
}
?>
推荐答案
您需要这样更改响应:
if($result->rowCount() > 0) {
$json = array();
while($row = $result->fetch()){
/** MAKE ARRAY NON ASSOCIATIVE **/
$json[] = array(
$row['email'],
$row['lastName'],
$row['firstName'],
$row['dateRegistered'],
$row['state']
);
}
/*** MAKE RESPONSE HAVE 'aaData' ENTRY ****/
$response = array();
$response['success'] = true;
$response['aaData'] = $json;
echo json_encode($response);
此处参考: http://datatables.net/release-datatables/examples /data_sources/ajax.html .具体来说:
Reference here: http://datatables.net/release-datatables/examples/data_sources/ajax.html. Specifically:
DataTables需要一个对象，该对象的数组名为"aaData"，并且 数据源.
DataTables expects an object with an array called "aaData" with the data source.
尽管您的ajax响应确实有，但您的表也没有'state'列...
Also your table does not have a 'state' column, although your ajax response does...
这篇关于使用Ajax和PHP进行简单的DataTable初始化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
