更新

Question

我有json数据被导入到我试图创建数据表的页面。

console.log(jsonReturn)：

 {"1":{"dateReceived":"1905-07-04","cost":"2.7200","number":"757991"},"2":{"dateReceived":"1905-07-04","cost":"2.7200","number":"757991"}}

下面是我的var jsonReturn：

Array
(
    [1] => Array
        (
            [dateReceived] => 1905-07-04            
            [cost] => 2.7200
            [number] => 757991

        )

    [2] => Array
        (
            [dateReceived] => 1905-07-04
            [cost] => 2.7200
            [number] => 757991

        )

    [3] => Array
        (
            [dateReceived] => 1905-07-04
            [cost] => 2.7200
            [number] => 757991

        )

)

我已经阅读了DataTables网站上的每个示例，但我找不到任何关于如何利用此变量填充表格的内容。除了初始化表格外：

$(document).ready(function(){    
    var table = $('#ltc-table').dataTable( {
    "aaData" : jsonReturn,   
});

将aaData设置为jsonReturn会将某些内容加载到我的表格中，但这只是胡言乱语。我需要知道如何告诉DataTables在哪里找到我希望它用于填充表的数据，以及我想要显示哪些行等等。

我通过执行以下操作来到达此javascript var：

用户使用文本框进行搜索，该文本框将进入ajax调用。

$.ajax({
      type: 'POST',
      url: 'quoteManagerSearch.php',      
      data: {searchBy:searchBy, searchValue:searchValue, options:options},        
        success:function(data){                
        jsonReturn = data;
        $("#quoteReturn").load("return.php");
        //$("#quoteReturn").html(data);                                            
        }
  }); //close ajax call


$searchQuery  = "SELECT * FROM alldata where $searchBy like '%$searchValue%'" ;
$searchResult = mysqli_query($con, $searchQuery);

$x = 0;
while ($row = mysqli_fetch_row($searchResult)) {

$x = $x + 1;


    $output[$x]["dateReceived"] = convertDate($row[1]);
    $output[$x]["cost"] = $row[15];
    $output[$x]["number"] = $row[16];
    }


echo json_encode($output);

成功后，return.php会加载到div中，并会创建var jsonReturn。

然后，在return.php我尝试使用我的无效对象。

更新

回应@ davidkonrad的帖子：

我现在收到以下错误：

DataTables warning: JSON data from server could not be parsed.  This is caused by a JSON formatting error.

从我所看到的（减去引号），我的JSON字符串看起来与你的完全一样。

{"aaData":[ 
  {"dateReceived":"1905-07-04","cost":"2.7200","number":"757991"},
  {"dateReceived":"1905-07-04","cost":"2.9200","number":"337995"}
  ]
}

我还将DataTable更改为dataTable，因为我正在使用1.9.4进行此测试。

更新＃2

我弄清楚出了什么问题！

正如我所看到的，这个过程如下：

用户加载quoteManager.php，然后在文本框中输入选项，然后点击search。此值将转换为javascript var，并在此ajax调用中发送：

$.ajax({
type: 'POST',
url: 'quoteManagerSearch.php',      
data: {searchBy:searchBy, searchValue:searchValue, options:options},        
  success:function(data){                
  jsonReturn = data;
  $("#quoteReturn").load("quoteManagerReturn.php");
  }

}）; //关闭ajax调用

quoteManagerSearch.php是针对数据库的实际查询。这会输出一个有效的JSON字符串。

quoteManager.php

，页面底部有一个<div>，可以将此响应加载到：

<div id="quoteReturn">
</div>

我在这里做错了。
quoteManagerReturn.php已加载到#quoteReturn页面上的quoteManager.php div中，但没有quoteManagerSearch.php返回的任何数据，因为quoteManagerReturn.php正在运行自己的ajax到quoteManagerSearch.php - 没有使用我在开头运行的那个，而这个字符串$searchBy = $_POST['searchBy'];是空的 - 所以我没有得到任何结果。这就是为什么它告诉我我的JSON无效，因为它是空的！
我需要做什么（我不知道该怎么做......）
1. 在jsonReturn中使用quoteManagerReturn.php - 因为这是我想要的有效JSON响应，而不是向quoteManagerSearch.php发出新 ajax请求，或
2. 将这些变量从quoteManager.php传递到quoteManagerReturn.php，并将其发送到我从quoteManagerReturn.php到quoteManagerSearch.php的ajax请求中。

更新2 ++

我通过在第二页上将变量添加到我的ajax调用中来解决这个问题：

var table = $('#ltc-table').DataTable( {    
      ajax : { 
       url : 'quoteManagerSearch.php' ,       
       dataSrc : 'aaData' ,
       type : 'POST',
       data: {searchBy:searchBy, searchValue:searchValue, options:options},
      },

我从我的第一页开始接受原始的ajax调用（因为没有理由重复...）我相信这是解决方案！

Answer 1

你的json是一个带有编号属性的javascript对象：

{
  "1":{"dateReceived":"1905-07-04","cost":"2.7200","number":"757991"},
  "2":{"dateReceived":"1905-07-04","cost":"2.7200","number":"757991"}
}

应该是一个javascript对象数组，如下所示：

[
  {"dateReceived":"1905-07-04","cost":"2.7200","number":"757991"},
  {"dateReceived":"1905-07-04","cost":"2.7200","number":"757991"}
]

Answer 2

我假设你正在使用dataTables 1.9.4或类似的，基于对aaData的引用。 dataTables 1.9.x想要一个看起来像

的JSON响应

{ aaData : [ 
   { item }, 
   { item }, 
   ...
  ]
}

因此，为了获得正确的JSON格式，请将quoteManagerSearch.php脚本的最后一部分更改为：

...
$output = array();
while ($row = mysqli_fetch_row($searchResult)) {
    //create { item }
    $item = array();
    $item["dateReceived"] = convertDate($row[1]);
    $item["cost"] = $row[15];
    $item["number"] = $row[16];
    //add { item } to [] 
    $output[] = $item;
}
//add [] array to aaData
$result = array('aaData' => $output);
echo json_encode($result);

现在您可以初始化dataTable并定义“要读取哪些值以及放置它们的位置”：

var table = $('#ltc-table').dataTable( {
    sAjaxSource : 'quoteManagerSearch.php',
    aoColumns : [
        { mDataProp : 'dateReceived' },
        { mDataProp : 'cost' },
        { mDataProp : 'number' }
    ]
});

至于dataTables 1.10.7，我会说上面的初始化也可以正常工作。我试了一下，没有任何错误。 dataTables将选项名称等与旧的匈牙利表示法名称和新的API命名标准成对映射，甚至aaData也可以作为默认值，即使dataTables现在首先查找data对象。如果您想使代码完全符合“1.10.7”，请改为：

var table = $('#example').DataTable( {
    ajax : {
        url: 'quoteManagerSearch.php',
        dataSrc: 'aaData',
    },
    columns : [
        { data : 'dateReceived' },
        { data : 'cost' },
        { data : 'number' }
    ]
});

Answer 3

如果您从服务器端REST API中提取数据，通常在较新版本的数据表中，您可以执行以下操作：

    $('#myTable').DataTable({
                    "language": language,               
                    "ajax": {
                        "url" : "/myservice/rest/" + params,
                        "error": function(reason) {
                            $('#myTable').html(errorMessage);
                            }
                        }
                    },
"columns": [
                    {"data": "orderNum"},
                    {"data": "orderDate"},
                    {"data": "customerName"},
// other column samples ...
                ],
    // other params ...
    });

将json对象合并到数据表中

更新

更新＃2

更新2 ++

3 个答案: