数据表:未捕获的TypeError:无法读取未定义的属性“长度”

时间:2012-12-27 15:58:17

标签: json datatables

我正在尝试使用带有Datatables的ajax源代码,并且在执行操作时遇到了一些错误。以前Ajax没有与Datatables一起使用,它们工作正常,但在尝试使用Ajax和JSON时我遇到了一些错误。

我收到的错误如下:

  

未捕获的TypeError:无法读取未定义的属性“长度”

编辑:在使用此文本正下方的修订代码后,此错误不再存在,但DataTable仍然被破坏(没有搜索,分页,排序等...)。有一个实例可能会有所帮助,请尝试使用此网站: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"}]

该表是正确生成的,但由于此错误,有文本说“正在处理表上方,您不能使用数据表的任何功能,例如搜索。

以下是使用上述JSON表格的图像: Example table output

我假设错误出现在我的JSON输出中,但我并不完全知道它有什么问题,也不知道应该怎么做才能修复它。我对Web开发很陌生,实现Datatables一直是学习曲线!

1 个答案:

答案 0 :(得分:6)

由于以下原因,您的JSON输出错误:

  1. 缺少iTotalRecordsiTotalDisplayRecords字段。这就是分页(以及所有其他功能)被打破的原因(注意消息“显示1到 NaN NaN 条目(从 NaN 总条目)“在页脚部分)。有关服务器端处理的更多详细信息,请参阅this page
  2. JSON响应后有一些HTML代码。
  3. 以下是额外的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代替;有关详细信息,请查看this answer