Question

我的桌子没有填充。我可以看到它正在获得正确的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" }
    ]
} );

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

它说＆＃34;正在加载......＆＃34;当网络选项卡显示该呼叫具有带有正确数据的200响应时。

为什么表格没有填充？

Answer 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数据。

无论如何我更喜欢这种方式，因为我觉得如果我想在同一时间修改或使用其他任何数据，它会给我更大的灵活性。

Answer 2

我认为你必须使用＆＃34; aaData＆＃34;

的数组返回你的json

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

默认情况下，DataTables将使用＆＃34; aaData＆＃34;返回数据的属性，它是一个数组数组，表中每列都有一个条目。

在你的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

Answer 3

遵循以下风格。工作了

[{"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++;
        });
    }

Answer 4

该表未填充，因为您收到的JSON数据中没有 data 对象，但引用它（data object）进行显示在表格列中。

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

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

Answer 5

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

“ aaData”：数据，

最终我可以使用它

“ ajax”：{ “ url”：“ index.php / controller / function”， “ dataSrc”：“” }

代替

“数据”：[ [ “老虎尼克松”， “系统架构师”， “爱丁堡”， “ 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唯一

祝你好运

Answer 6

Js Code，其中json网址：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>

`

Answer 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;

                      }
                  },

从ajax json

7 个答案: