从 ajax json 填充数据表答案

【问题标题】：Populate Datatable from ajax json从 ajax json 填充数据表
【发布时间】：2017-02-03 05:26:05
【问题描述】：

我的表没有填充。我可以看到它正在获取正确的 JSON

收到的 JSON 数据如下所示：

[
  {
    "id": "1",
    "name": "FooBar",
    "predicted": "0",
    "points": "1",
    "section_id": "1",
    "detail_alias": ""
    ...
  },
  ...
]

HTML

<table id="example"></table>

JS

$('#example').dataTable( {
    "ajaxSource": "rest/index.php?m=foo",
    "columns": [
        { "data": "id" },
        { "data": "name" },
        { "data": "detail_alias" },
        { "data": "points" }
    ]
} );

我在浏览器中看到的只是：

当网络选项卡显示呼叫具有正确数据的 200 响应时，它会显示“正在加载...”。

为什么表格没有填充？

【问题讨论】：

datatables.net/examples/data_sources/ajax.html - 你看过文档了吗？它看起来与您的示例非常不同。据此，至少可以说，您的数据结构是错误的。
是的，虽然这个文档更适合我的需要：datatables.net/reference/option/columns.data#Examples（您可以命名列以匹配数据）
我明白了。嗯，这是尴尬。我对数据表的经验有限，并且碰巧熟悉我链接的文档。但是，我以前从未见过您链接过的文档，所以在这种情况下，我想我没有什么要补充的，抱歉！
插件在控制台中抛出的任何警告？
能够让它工作：pastebin.com/LNFvDkQG，实际上我更喜欢使用 $.ajax 获取数据，因为它给了我更多的灵活性。

标签： jquery ajax datatables

【解决方案1】：

所以我的问题中的ajaxSource 期望数据的格式如下：

{ data: [ { ...

而且我不想修改我的后端来以这种格式发送数据，因为这会在其他地方引起问题。我假设最终在此页面上寻找解决方案的其他人可能会遇到同样的问题。

我的解决方案是通过jQuery.ajax() 获取数据，然后将其传递给aaData 字段，如下所示：

$.ajax({
    'url': "/rest/index.php?m=foo",
    'method': "GET",
    'contentType': 'application/json'
}).done( function(data) {
    $('#example').dataTable( {
        "aaData": data,
        "columns": [
            { "data": "id" },
            { "data": "name" },
            { "data": "detail_alias" },
            { "data": "points" }
        ]
    })
})

这让我不必担心从问题中的格式更改 json 数据。

无论如何我更喜欢这种方式，因为如果我想同时修改或将数据用于其他任何事情，我觉得它给了我更大的灵活性。

【讨论】：

谢谢。这对我有用。但我要问你，如果某个列值为空或为空怎么办？如何检查？
已经很久了，从那以后我就再也没有使用过数据表了……但我想它可以很好地处理空/空数据吗？发生什么了？您有具体问题或疑虑吗？
是处理空/空值的数据表。但我想显示某个列值是否为空值或空值，然后我想显示静态内容，即“N/A”。
我想我会在输入数据表之前将 empty/null 映射到“N/A”。

【解决方案2】：

我认为您必须返回带有“aaData”数组的 json

return dataTabledata['aaData'] = 'your json data'

默认情况下，DataTables 将使用返回数据的“aaData”属性，这是一个数组数组，表中的每一列都有一个条目。

在您的 jQuery 中创建 ajax 来处理来自服务器端的数据

 function getdtData(){
    /*clear table row first*/
    $('#sample').dataTable().fnDestroy();
    /*populate your datatable using ajax*/
    $('#sample').dataTable({
    "sDom": 'frtip',
    "bServerSide": true,
     /*server side source*/
    "sAjaxSource": "rest/index.php?m=foo",
     /* we use sDom to specify the lenght of the pagination if you will using pagination in your data table*/
    "lengthMenu": [[ 5, 5], [ 5, 5]],
    "aoColumnDefs": [
        { "aTargets": [ 0 ], "bSortable": false},
        { "aTargets": [ 1 ], "bSortable": false },
        { "aTargets": [ 2 ], "bSortable": false },
        { "aTargets": [ 3 ], "bSortable": false }
    ]
});

请参阅此文档http://legacy.datatables.net/usage/server-side

【讨论】：

@smerny 是的，虽然有点混乱，但喜欢编码
好的，我不想修改从服务器发送的数据，因为这会弄乱其他一些东西。不过，我会对此给予 +1 以引导我找到适合我的解决方案。

【解决方案3】：

在使用codeigniter json_encode 数据提示时遇到了同样的问题，经过几天的尝试，它返回了Flat array data source

“aaData”：数据，

我终于让它工作了

“阿贾克斯”：{ "url": "index.php/controller/function", “数据源”：“” },

而不是

“数据”：[ [ “老虎尼克松”， “系统架构师”， “爱丁堡”， "5421", "2011/04/25", “320,800 美元” ],

，其实很简单see datatble ajax documentation

$(document).ready(function() {
    $('#t1').DataTable( {
        "ajax": {
            "url": "<?php echo base_url(); ?>index.php/controller/function",
            "dataSrc": ""
        },
        "columns": [
            { "data": "CCODIGOCLIENTE" },
            { "data": "CRAZONSOCIAL" },
            { "data": "PENDIENTE" },
            { "data": "siete" },
            { "data": "sietev" },
            { "data": "catorcev" },
            { "data": "catorce" },
            { "data": "veintiunov" },
            { "data": "veintiuno" },
            { "data": "mes" },
            { "data": "bimestre" },
            { "data": "trimestre" }
        ]
    } );
} );

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

        <table id="t1" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>QTime</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

给初学者的一些建议......

确保您的脚本位于库下方
列数与您的数据匹配
让您的数据表 ID 独一无二

祝你好运

【讨论】：

【解决方案4】：

跟进以下样式。这是工作

[{"first_name": "Ashok","last_name": "Parmar"}]

$('#dataTbl').DataTable({

        ajax:{
           url:  '/view',
           type: 'POST',
           
           contentType: 'application/json',
           success: function(data){
                
                populateDataTable(data);
           },
           error: function (e) {
                console.log("There was an error with your request...");
                console.log("error: " + JSON.stringify(e));
           }
        }//ajax

      }); // table

function populateDataTable(data) {
        $("#dataTbl").DataTable().clear();
        var row = 1;
        $.each(data, function (index, value) {
            $('#dataTbl').dataTable().fnAddData( [
                row,
                value.first_name,
                value.last_name 
              ]);

           row++;
        });
    }

【讨论】：

【解决方案5】：

表格未填充，因为您收到的 JSON 数据中没有 data 对象但引用它(data object) 以显示在表格列中.

根据您的 dataTable 初始化，您的 JSON 数据应如下所示：

{"data":[
  {
    "id": "1",
    "name": "FooBar",
    "predicted": "0",
    "points": "1",
    "section_id": "1",
    "detail_alias": ""
    ...
  },
  ...
]}

【讨论】：

这会像我在 cmets 中提到的那样工作，但需要我重写一堆不期望 data 字段的其他代码。 aaData 字段对我有用。
您是否正在尝试使用端服务器处理？您可以通过更新您的帖子来分享您的故障排除脚本吗？

【解决方案6】：

Js Code Where json url : getjsonrequest.php

`

$(document).ready(function() {
    $('#tableid').DataTable( {
        "ajax": {
            "url": "getjsonrequest.php",
            "dataSrc": ""
        },
        "columns": [
            { "data": "INDEX1" },
            { "data": "INDEX2" }
        ]
    } );
} );

`

HTML 代码

`

<table id="tableid" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Index 1</th>
                <th>Index 2</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Index 1</th>
                <th>Index 2</th>
            </tr>
        </tfoot>
    </table>

`

【讨论】：

【解决方案7】：

var $table = $('#productListTable');

// execute the below code only where we have this table
if($table.length) {
    //console.log('Inside the table!');

    var jsonUrl = '';
    if(window.categoryId == '') {
        jsonUrl = window.contextRoot + '/json/data/all/products';
    }
    else {
        jsonUrl = window.contextRoot + '/json/data/category/'+ window.categoryId +'/products';
    }



    $table.DataTable( {

        lengthMenu: [[3,5,10,-1], ['3 Records', '5 Records', '10 Records', 'ALL']],
        pageLength: 5,
        ajax: {
            url: jsonUrl,
            dataSrc: ''
        },
        columns: [
                  {
                      data: 'code',
                      bSortable: false,
                      mRender: function(data, type, row) {

                          return '<img src="'+window.contextRoot+'/resources/images/'+data+'.jpg" class="dataTableImg"/>';

                      }
                  },
                  {
                      data: 'name'                        
                  },
                  {
                      data: 'brand'                       
                  },
                  {
                      data: 'unitPrice',
                      mRender: function(data, type, row) {
                          return '&#8377; ' + data
                      }
                  },
                  {
                      data: 'quantity',
                      mRender: function(data, type, row) {

                          if(data < 1) {
                              return '<span style="color:red">Out of Stock!</span>';
                          }

                          return data;

                      }
                  },

【讨论】：