我正在研究数据表。我已经发布了2个与该问题thisthis相关的问题。

AJAX通话:

API.call("getBasicCallAnalysisData.json", 'POST', function(data) {
    basicData = data;

    createTable(basicData);
}, function(error) {
    console.log(error);
}, jsonStr);


这是我来自服务器的json响应:

{"msg":null,"code":null,"status":null,"result":[{"aNumber":"3224193861","bNumber":"3217284244","cellID":"410-01-604-30226","dateTime":"2017-06-24 23:08:09.0","duration":801,"imei":"27512671195807","imsi":"35788979525680","operatorId":1,"mscId":"2","fileId":"1"},{"aNumber":"3224193861","bNumber":"3217280585","cellID":"410-01-738-13433","dateTime":"2017-06-24 06:53:13.0","duration":198,"imei":"46341570864238","imsi":"33270572168878","operatorId":2,"mscId":"4","fileId":"2"}],"draw":1,"limit":1000,"recordsFiltered":13442,"recordsTotal":13442}


HTML表格:

<table id="table" class="display responsive nowrap" cellspacing="0" width="100%">
                                <thead style="background-color:#303641;">
                                    <tr>
                                        <th>ANUMBER</th>
                                        <th>BNUMBER</th>
                                        <th>DATETIME</th>
                                        <th>DURATION</th>
                                        <th>IMEI</th>
                                        <th>IMSI</th>
                                        <th>CELLID</th>
                                        <th>OPRID</th>
                                        <th>MSC ID</th>
                                        <th>FILE ID</th>
                                    </tr>
                                </thead>
                            </table>


这是我加载数据表的功能,但是我面临两个错误:

function createTable(data) {
    console.log(data);
    $('#table').DataTable({
        "processing": true,
        "serverSide": true,
        "bFilter": false,
        "iDisplayLength": configData,
        dom: 'Bfrtip',
        buttons: ['colvis', 'print', 'csv', 'excel', 'pdf'],
        searching: false,
        language: {
            buttons: {
                colvis: 'Show/Hide Columns'
            }
        },
        "aaData": data


    });
}


参数data是来自服务器的响应。错误是:


  DataTables警告:表格ID =表格-请求的未知参数
  第0行第0列为'aNumber'。有关此错误的更多信息,
  请参阅http://datatables.net/tn/4





  无效的JSON响应。


任何想法,我怎么能用JSON响应填充数据表?

最佳答案

有两种将您的json放入DataTables的可能性...


使用jQuery Ajax request
使用DataTables remote preocessing


您使用第一个。

您的代码有两个主要问题:


多余的DataTables属性。
有效的JSON,但未按照DataTables的预期进行结构化。


#1
属性"serverSide": true,基本上表示您打算使用“远程处理”。因此,DataTables现在期望一个拥有PHP地址的“ ajax”属性来获取JSON。此缺少的属性触发了“无效的JSON”错误。

我听说您现在大声喊叫不清楚的错误消息!!! (大声笑)

#2
DataTables希望将数据结构化为整个表的数组...
该数组必须包含“行”值的数组。示例here

那不是你实际拥有的。
因此,我做了一个函数来“重新排列”数据以满足DataTables的期望。

console.clear();

// A function to run trhough your json and restructure the data as an array of array.
function arrangeData(data){
  var datatableData = [];

  for(i=0;i<data.length;i++){
    var row = [
      data[i].aNumber,
      data[i].bNumber,
      data[i].cellID,
      data[i].dateTime,
      data[i].duration,
      data[i].imei,
      data[i].imsi,
      data[i].operatorId,
      data[i].mscId,
      data[i].fileId
    ];
    datatableData.push(row);
  }
  console.log(datatableData);

  return datatableData;
}

// Your original function not really changed...
function createTable(data) {

  $('#table').DataTable({
    "processing": true,
    //"serverSide": true,     // This works with the "remote preocessing" ajax attribute.
    "bFilter": false,
    //"iDisplayLength": configData,   // I commented this one only because I did not have the "configData" variable.
    dom: 'Bfrtip',
    buttons: ['colvis', 'print', 'csv', 'excel', 'pdf'],
    searching: false,
    language: {
      buttons: {
       colvis: 'Show/Hide Columns'
      }
    },
    "aaData": arrangeData(data)   // I'm calling the "arrange" function here.
  });
}

// This is to simulate the response you get form jQuery Ajax.
var dataset = {
  msg:null,
  code:null,
  status:null,
  result:[
    {
      "aNumber":"3224193861",
      "bNumber":"3217284244",
      "cellID":"410-01-604-30226",
      "dateTime":"2017-06-24 23:08:09.0",
      "duration":801,
      "imei":"27512671195807",
      "imsi":"35788979525680",
      "operatorId":1,
      "mscId":"2",
      "fileId":"1"
    },
    {
      "aNumber":"3224193861",
      "bNumber":"3217280585",
      "cellID":"410-01-738-13433",
      "dateTime":"2017-06-24 06:53:13.0",
      "duration":198,
      "imei":"46341570864238",
      "imsi":"33270572168878",
      "operatorId":2,
      "mscId":"4",
      "fileId":"2"
    }
  ],
  "draw":1,
  "limit":1000,
  "recordsFiltered":13442,
  "recordsTotal":13442
};

// Call the table draw function... Certainly in your ajax success callback.
createTable(dataset.result);


CodePen

09-25 20:01
查看更多