【问题标题】:jQuery Datatable unable to feed json into the tablejQuery Datatable 无法将 json 输入表中
【发布时间】:2015-08-05 06:55:44
【问题描述】:

这是我从 django 后端收到的响应的 json 格式。如何让数据表将其读入表中?

[{
    "model": "model name", 
       "pk": 2, 
   "fields": {
         "name1": .., 
         "name2": ..,
         }
  },
  {
    "model": "model name", 
       "pk": 2, 
   "fields": {
         "name1": .., 
         "name2": ..,
         }
  }
]

Javascript:

    $(document).ready( function () {
            $('#tablename')
            .on('xhr.dt', function(e, settings, json){
                console.log(json)
            })
            .DataTable({
                "ajax": {
                    "url": "list",
                    "dataSrc": "",
                },
            });
    });

console.log(json) 将 json 打印为字符串而不是 JS 对象。

【问题讨论】:

    标签: jquery ajax json datatable


    【解决方案1】:

    没有什么恶作剧:

    $('#tablename').DataTable({
       ...
       columns : [
          { data : 'fields.name1' },
          { data : 'fields.name2' }
          //etc
       ]        
    });
    

    更新(调查 OP 网站后)

    1. 您的http://anime.moxware.com/list/ 工作正常
    2. http://anime.moxware.com/list/?_12234343434 也可以
    3. 你期待什么

      $.ajax({
          dataType: 'json',
          type: 'GET',
          url: 'list',
      }).done(addDataToTable.bind(this));
      
      function addDataToTable(data){
         this.dt.rows.add(data).draw();
      }
      

      做什么?

    直接有据可查的方式进行,正如数百个示例所展示的那样:

    <table id="animelist" class="table">
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
    </table>
    
    var dt = $('#animelist').DataTable({
       ajax : {
            url : 'list',
            dataSrc : ''
       },
       processing: true,
       columns : [
           {"data" : 'fields.anime_name', "title": "Anime Title"},
           {"data" : 'fields.season_no', "title": "Season"},
           {"data" : 'fields.episodes_watched', "title": "Episodes Watched"},
           {"data" : 'fields.total_episodes', "title": "Total Episodes"}
        ]
    });
    

    仅此而已。没有创造性的书面 ajax 调用,没有替代的添加方法,没有双重的字段、名称或标题定义,没有尾随逗号或其他任何东西。

    【讨论】:

    • Uncaught TypeError: Cannot read property 'length' of undefined 这是 jQuery 数据表控制台中显示的错误。
    • 无论如何我已经使用了另一种方法来解决这个问题。由于某种原因,数据表的 ajax 调用有一个带有 GET 参数的奇怪 url。
    • @Mox "Uncaught TypeError: Cannot read property 'length' of undefined" 您在&lt;th&gt; 中的列数可能与从 JSON 中指定的字段数不同- 它们应该匹配,请参阅 JSON 示例 -> jsfiddle.net/vqo8o71d
    • datatable 调用的 ajax 确实得到了响应。我已经将它粘贴在 javascript 中以直接加载。有用。但是,当我将源更改为 ajax 时,它将永远无法工作。 =/
    • @Mox,请参阅更新。您可以轻松地假设 - 当如此简单的代码不适合您时 - 是您自己犯了错误,这肯定不是错误 - 解决方案不是试图让它变得更复杂而是更简单 -最简单的就是按照所有文档和手册的要求去做。我可以向您保证更新答案中的代码有效。从您的站点获取源代码并将其改回您可能开始使用的代码。
    猜你喜欢
    • 2017-06-01
    • 2018-12-27
    • 1970-01-01
    • 1970-01-01
    • 2022-11-03
    • 2013-02-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多