Question

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

AJAX CALL：

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：

<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 - 请求的未知参数第0行第0列的“aNumber”。有关此错误的详细信息，请参阅http://datatables.net/tn/4

和

无效的JSON响应。

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

Answer 1

有两种方法可以让你的json进入DataTables ......

使用jQuery Ajax request
使用DataTables remote preocessing

你使用第一个。

您的代码存在两个主要问题：

超级DataTables属性。
有效的JSON，但不是像DataTables那样的结构。

<强>＃1
属性"serverSide": true,基本上表示您打算使用“远程处理”。因此，DataTables现在需要一个“ajax”属性来保存PHP地址以获取JSON。此缺少的属性触发了“无效的JSON”错误。

我听到你现在大声喊着不清楚的错误消息！（LOL）

<强>＃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

从自定义响应

1 个答案: