javascript - 将 json 对象合并到数据表中

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"}}

下面是我的变量 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

我知道出了什么问题了!

据我所知，过程如下:

1. 用户加载 quoteManager.php，并在文本框中输入选项，然后点击 search 。该值被转换为 JavaScript 变量，并在此 ajax 调用中发送:

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

   });//关闭ajax调用

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

在 quoteManager.php ，有一个<div>位于页面底部，以便将此响应加载到:

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

我在这里做错了什么。

quoteManagerReturn.php被加载到 #quoteReturn div 上 quoteManager.php页面 - 但没有 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 发出的 ajax 请求中至quoteManagerSearch.php .

更新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

根据对 aaData 的引用，我假设您正在使用 dataTables 1.9.4 或类似版本。 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);

现在您可以初始化数据表并定义“读取哪些值以及将它们放在哪里”:

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' }
    ]
});