2012-12-27 74 views
4

我正在尝试对Datatables使用ajax源,并且遇到了一些错误。以前Ajax没有和Datatables一起使用,并且它们工作正常,但是在尝试使用Ajax和JSON时我有一些错误。Datatables:Uncaught TypeError:无法读取未定义的属性'长度'

我recieving错误是:

Uncaught TypeError: Cannot read property 'length' of undefined

编辑:在直接使用下面这段文字的修改后的代码,这个错误不再出现,但数据表仍破(无觅处,分页,排序等...)。它可以帮助有一个活生生的例子,那么试试这个网站: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一直是相当学习的曲线!

+0

如果在数据表配置中删除''sAjaxDataProp“:”“行,会发生什么?你仍然得到同样的错误? –

+0

@TanzeelKazi当我删除该行时,似乎没有任何事情发生。我已经更新了我的帖子以显示我正在使用的新JS,但现在而不是任何错误,现在似乎DataTable功能无法正常工作。分页已经结束,搜索,排序等全部不起作用,只是没有错误来解释为什么了。 如果它有帮助,这里是我的网站链接,你可以看到测试: http://fogest.com/test/index.php – ComputerLocus

回答

6

你的JSON输出是错误的,原因如下:

  1. iTotalRecordsiTotalDisplayRecords字段缺失。这就是为什么分页(和所有其他功能)被破坏的原因(请注意“在页脚部分中”显示1到NaNNaN条目(从NaN总条目中过滤掉))。有关服务器端处理的更多详细信息,请参见this page
  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代替;请看this answer了解更多详情。

+0

正在添加的额外内容的问题是,我的主机(免费)自动插入,所以我没有选择这样做。我想我需要更换主机,但同时,我会在本地进行测试。我会试着回答你的问题,并在另一个评论中回复我的结果!谢谢! – ComputerLocus

+0

在尝试了您提供的代码之后,我的问题基本上与以前相同,只是条目不再显示“NaN”,它们显示的条目数量正确。搜索和过滤(排序)仍然被打破。当我尝试使用它们时,“处理”文本瞬间出现,但没有任何变化。 **编辑:这是在本地主机上完成的。 JSON之后的额外html不在本地主机上** – ComputerLocus

+0

我的PHP代码仅仅是一个例子。你可以找到一个更好的服务器端PHP脚本[这里](http://www.datatables.net/development/server-side/php_mysql)。 – 2013-01-04 12:52:30

相关问题