Datatables:未捕获的 TypeError 错误: 无法读取未定义属性 'length'

4

我试图在Datatables中使用ajax数据源,但在操作过程中遇到了一些错误。以前并没有使用Ajax与Datatables,它们一直正常工作,但尝试使用Ajax和JSON后出现了一些错误。

我收到的错误如下:

未捕获的类型错误:无法读取未定义的'length'属性

编辑:在使用下面这段修订后的代码之后,不再出现此错误,但Datatables仍然无法正常工作(无法搜索、分页、排序等...)。可能需要一个实时示例,请尝试访问此网站:fogest.com/test

以下是在页面加载时创建表格的代码:

$(document).ready(function() {
    $('#trades').dataTable( {
        "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
        "sPaginationType": "bootstrap",
        "bProcessing": true,
        "bServerSide": true,
        "aoColumns": [
            { "mData": "id" },
            { "mData": "Minecraft_Username" },
            { "mData": "Block_Name" },
            { "mData": "Quantity" },
            { "mData": "Cost" },
            { "mData": "Trade_Status" },
          ],
        "sAjaxSource": "test.php"
    } );
} );

而 sAjaxSource test.php 包含以下内容:

<?php 
$tableName = "mctrade_trades";
$result = mysql_query("SELECT `id`, `Minecraft_Username`, `Block_Name`, `Quantity`, `Cost`, `Trade_Status` FROM $tableName");

$data = array();
while ( $row = mysql_fetch_assoc($result) )
{
    $data[] = $row;
}
header("Content-type: application/json");
echo json_encode( $data );    

?>

test.php的输出:
[{"id":"1","Minecraft_Username":"fog","Block_Name":"DIAMOND_PICKAXE","Quantity":"1","Cost":"100","Trade_Status":"1"},{"id":"2","Minecraft_Username":"fog","Block_Name":"DIAMOND_PICKAXE","Quantity":"1","Cost":"1002","Trade_Status":"1"},{"id":"3","Minecraft_Username":"fog","Block_Name":"DIAMOND_PICKAXE","Quantity":"1","Cost":"1035","Trade_Status":"1"},{"id":"4","Minecraft_Username":"fog","Block_Name":"DIAMOND_PICKAXE","Quantity":"1","Cost":"1035","Trade_Status":"1"},{"id":"5","Minecraft_Username":"fog","Block_Name":"DIAMOND_PICKAXE","Quantity":"1","Cost":"100","Trade_Status":"2"},{"id":"6","Minecraft_Username":"fog","Block_Name":"DIAMOND_PICKAXE","Quantity":"1","Cost":"100","Trade_Status":"2"},{"id":"7","Minecraft_Username":"fog","Block_Name":"DIAMOND_PICKAXE","Quantity":"1","Cost":"10000","Trade_Status":"2"}]

表格已经正确生成,但由于这个错误,上面会显示“正在处理”文本,你不能使用任何Datatable的功能,如搜索。
以下是使用上述JSON生成的表格示例图像:
我猜测错误在我的JSON输出中,但我不知道具体是什么问题,也不知道应该怎么解决。我对Web开发还很陌生,实现Datatables一直是一个学习曲线!

еҰӮжһңжӮЁеңЁdatatableй…ҚзҪ®дёӯеҲ йҷӨsAjaxDataProp: ""иЎҢпјҢдјҡеҸ‘з”ҹд»Җд№ҲпјҹжӮЁжҳҜеҗҰд»Қ然дјҡ收еҲ°зӣёеҗҢзҡ„й”ҷиҜҜпјҹ - Tanzeel Kazi
@TanzeelKazi 我删除那行代码后好像什么也没发生。我已经更新了我的帖子以展示我现在使用的新JS,但现在似乎DataTable功能不再起作用。分页、搜索、排序等全部都不工作,但是没有错误可以解释为什么不工作。如果有帮助的话,这里是我的网站链接,您可以看到测试情况:http://fogest.com/test/index.php - ComputerLocus
1个回答

6
您的JSON输出有以下问题:
  1. iTotalRecordsiTotalDisplayRecords字段缺失。这就是为什么分页(以及所有其他功能)无法正常工作的原因(请注意页脚部分的消息:“显示 1 到 NaN 个条目(从 NaN 个总条目中筛选)”)。有关服务器端处理的详细信息,请参见此页面
  2. 在JSON响应后面有一些HTML代码。

以下是额外的HTML代码(来源于test.php):

<!-- Hosting24 Analytics Code -->
<script src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->

我认为test.php脚本应该像下面这样:

<?php 

$link = mysqli_init();

// Adjust hostname, username, password and database name before use!
$db = mysqli_real_connect($link, "hostname", "username", "password", "database") or die(mysqli_connect_error());

$SQL = 'SELECT `id`,`Minecraft_Username`,`Block_Name`,`Quantity`,`Cost`,`Trade_Status` FROM mctrade_trades';
$result = mysqli_query($link, $SQL) or die(mysqli_error($link));

$aaData = array();
while ($row = mysqli_fetch_assoc($result)) {
    $aaData[] = $row;
}

$response = array(
  'aaData' => $aaData,
  'iTotalRecords' => count($aaData),
  'iTotalDisplayRecords' => count($aaData)
);
if (isset($_REQUEST['sEcho'])) {
  $response['sEcho'] = $_REQUEST['sEcho'];
}

header('Content-type: application/json'); 
echo json_encode($response);

?>

请注意,mysql_*函数已被弃用,因此您应该使用PDOMySQLi代替;请参考此答案以获取更多详细信息。


添加的额外内容的问题在于,我的主机(免费版)会自动插入它,所以我无法选择是否要添加它。我想我需要更换主机,但在此期间,我将在本地进行测试。我会尝试您的答案,并在另一条评论中向您反馈结果!谢谢! - ComputerLocus
尝试了您提供的代码后,我遇到了与之前基本相同的问题,只是现在条目不再显示“NaN”,而是显示正确数量的条目。搜索和过滤(排序)仍然无法正常工作。当我尝试使用它们时,会出现“处理中”文本,但没有任何变化。编辑:这是在本地主机上完成的。JSON之后的额外HTML在本地主机上不存在 - ComputerLocus
我的PHP代码只是一个例子。你可以在这里找到一个更好的服务器端PHP脚本:http://www.datatables.net/development/server-side/php_mysql。 - user1419445

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接