从自定义响应加载数据表

Question

我正在处理数据表。我已经发布了 2 个与我的这个问题 this 和 this 相关的问题。

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 警告：table id=table - 请求的未知参数 'aNumber' 表示第 0 行第 0 列。有关此错误的更多信息， 请看http://datatables.net/tn/4

和

无效的 JSON 响应。

任何想法，我如何使用 JSON 响应填充数据表？

Answer 1

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

1. 使用jQuery Ajax request
2. 使用DataTables remote preocessing

你使用第一个。

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

1. 一个多余的 DataTables 属性。
2. 一个有效的 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