带有 JSON 的 DataTable 数据集答案

【问题标题】：DataTable dataset with JSON带有 JSON 的 DataTable 数据集
【发布时间】：2016-09-24 17:04:43
【问题描述】：

我正在尝试使用 DataTable 来显示我的 JSON 的所有字段，但我不明白如何使用它。

我只需要如何正确填充数据集来读取数据。

<script>
        <?php
            var jqxhr = $.ajax({url: api_ricerca_ingredienti, type: "GET",dataType: "json", data: {all: 1, ln : "it",completo:"-1",conteggio: 1}} )
              var max=json.items.length;
              for (i=0;i<max;i++){
                var el=json.items[i];
              }
              $(".risultato_ricerca").click(function() {
                carica_ingrediente($(this).attr('data-id'));
              });
            })
            <?php }?>

            var dataSet = [
              /*HOW?*/
            ];

            $(document).ready(function() {
              $('#example').DataTable( {
                data: dataSet,
                columns: [
                  { title: "Nome" },
                  { title: "Stato" },
                  { title: "Home" },
                  { title: "Utente" },
                  { title: "Mi piace" },
                  { title: "Contributi" }
                ]
              } );
            } );
            </script>
            <table id="example" class="table table-responsive table-hover table-dynamic filter-head"></table>

【问题讨论】：

您需要更好地了解 PHP 和 Javascript 之间的区别。您在 PHP 标记之间的代码不是 PHP。
你是对的。谢谢，我是新手，我不明白这种区别。无论如何，您知道如何使用我的 json 中的 6 个字段填充我的数据集吗？再次感谢您。
知道你的 json 是如何构建的，否则我们不知道如何将它操作成正确的结构会很有帮助
我已经准备了一个 api，它在一些 sql 之后创建一个对象数组："Object {id:"1457449151.anacardo-cashew-9a6bbc", imm_home: Object, nome: "Anacardo", slug: “anacardo”，utente：“redazione”...}完成：“Pubblico”countingredienti：“0”home：“Sì”id：“1457449151.anacardo-cashew-9a6bbc”imm_home：Objectlikes：“1”nome：“Anacardo”slug : "anacardo"utente: "redazione" 过去我是这样制作手动表的： var max=json.items.length; for (i=0;i 等

标签： php json datatable html-table

【解决方案1】：

对不起各位。我已经截断了我的上一个代码。现在数据数组的构建就像一个魅力。我只是怀疑控制台错误： "jquery.dataTables.min.js:5 Uncaught TypeError: Cannot read property 'aDataSort' of undefined"

我无法显示我的行。按照你的看法，有什么问题吗？

谢谢！

<script>
< ?php
if (isset($_GET) && isset($_GET['id'])){
             ?>
             $( document ).ready(function() {
               carica_ingrediente('<?php echo $_GET['id'];?>');
            });
          <?php }else {?>
            $('#query').keypress(function(e) {
              if (e.keyCode == $.ui.keyCode.ENTER) {
                $('#cerca').click();
              }
            });
          $(document).ready(function() {
              var jqxhr = $.ajax({url: api_ricerca_ingredienti, type:   "GET",dataType: "json", data: {all: 1, ln : "it",completo:"-1",conteggio: 1}} )
              .done(function(json) {
                if (json.res==0){
                  alert( "Inserisci una parola per iniziare la ricerca " );
                  return;
                }
                var dataSet = [];
                for (i=0;i<json.items.length;i++){
                  var el = [json.items[i].nome,json.items[i].completo, json.items[i].home, json.items[i].utente, json.items[i].likes, json.items[i].countingredienti];
                  dataSet[i] = el;
                  console.log(el);
                }
                $(".risultato_ricerca").click(function() {
                  carica_ingrediente($(this).attr('data-id'));
                });

                $(document).ready(function() {
                  $('#example').DataTable( {
                    data: dataSet,
                    columns: [
                      { title: "Nome" },
                      { title: "Stato" },
                      { title: "Home" },
                      { title: "Utente" },
                      { title: "Mi piace" },
                      { title: "Contributi" }
                    ]
                  } );
                } );
              })
              .fail(function() {
                alert( "error" );
              });

            });

            <?php }?>
            </script>

【讨论】：

【解决方案2】：

首先，关于您的代码的两个问题。正如@Patrick Q 所说，您的 PHP 标签是无用的：您正在编写 Javascript，PHP 是与您的代码无关的另一件事，因此请删除 <?php 和 <?php }?>

然后，我看不懂这段代码：

for (i=0;i<max;i++){
   var el=json.items[i];
}

这完全没用。你循环遍历json.items 中的每个元素而不执行任何操作。最后，您只需将最后一个 json.items 存储在 el 中（甚至无需在代码中使用 el）。

顺便说一句，您的主要问题是：正如official documentation 中所说，您的数据集必须包含表格中每一行的数组，格式为：

var dataSet = [
    ["john","italy","home","john",15,20],
    ["john","italy","home","john",15,20]
]

此示例将创建两个相同的行，其中包含随机数据。

假设您的 json 中的每个项目都有 name country home user likes contribs 字段，您将需要这样的内容：

var dataSet = []; 
for (i=0;i<json.items.length;i++){
     var el = [json.items[i].name,json.items[i].country, json.items[i].home, json.items[i].user, json.items[i].likes, json.items[i].contribs]
     dataSet[i] = el;
 }

【讨论】：