DataTable没有正确推送数据

时间:2017-09-17 06:13:30

标签: jquery jquery-plugins datatables

我的dataTable列配置选项:

"columns": [{
    "name": "id",
    "data": "id",
    "visible": false,
    "orderable": false
  }, {
    "name": "tblOpr",
    "title": "<div class='table-opr-col table-opr-col-head'><div class='tbl-opr edit-opr-col-head'><span>Edit</span></div></div>",
    "visible": true,
    "orderable": false
  }, {
    "title": "Employee",
    "data": "emp_name",
    "orderable": true,
    "name": "emp_name"
  }, {
    "title": "Date",
    "data": "date",
    "orderable": true,
    "name": "date"
  }, {
    "title": "In Time",
    "data": "in_time",
    "orderable": true,
    "name": "in_time"
  }, {
    "title": "Out Time",
    "data": "out_time",
    "orderable": true,
    "name": "out_time"
  }, {
    "title": "In Deficit",
    "data": "in_deficit",
    "orderable": true,
    "name": "in_deficit"
  }, {
    "title": "Out Deficit",
    "data": "out_deficit",
    "orderable": true,
    "name": "out_deficit"
  }, {
    "title": "Hours worked",
    "data": "wt",
    "orderable": true,
    "name": "wt"
  }]

服务器端是真的。 来自服务器的数据是:

{
  "recordsTotal": 10,
  "recordsFiltered": 10,
  "data": [{
    "id": "92",
    "emp_name": "Anish Gupta (10012)",
    "date": "2017-09-15",
    "in_time": "22:10:00",
    "out_time": "00:00:00",
    "in_deficit": "00:10:00",
    "out_deficit": "",
    "wt": "00:00:00"
  }, {
    "id": "46",
    "emp_name": "Raman Kumar (10010)",
    "date": "2017-09-15",
    "in_time": "21:39:00",
    "out_time": "00:00:00",
    "in_deficit": "-00:21:00",
    "out_deficit": "",
    "wt": "00:00:00"
  }, {
    "id": "91",
    "emp_name": "Anish Gupta (10012)",
    "date": "2017-09-14",
    "in_time": "22:43:00",
    "out_time": "07:21:00",
    "in_deficit": "00:43:00",
    "out_deficit": "-00:21:00",
    "wt": "08:38:00"
  }, {
    "id": "45",
    "emp_name": "Raman Kumar (10010)",
    "date": "2017-09-14",
    "in_time": "21:10:00",
    "out_time": "06:49:00",
    "in_deficit": "-00:50:00",
    "out_deficit": "00:11:00",
    "wt": "09:39:00"
  }, {
    "id": "90",
    "emp_name": "Anish Gupta (10012)",
    "date": "2017-09-13",
    "in_time": "22:30:00",
    "out_time": "07:41:00",
    "in_deficit": "00:30:00",
    "out_deficit": "-00:41:00",
    "wt": "09:11:00"
  }, {
    "id": "44",
    "emp_name": "Raman Kumar (10010)",
    "date": "2017-09-13",
    "in_time": "22:10:00",
    "out_time": "06:28:00",
    "in_deficit": "00:10:00",
    "out_deficit": "00:32:00",
    "wt": "08:18:00"
  }, {
    "id": "89",
    "emp_name": "Anish Gupta (10012)",
    "date": "2017-09-12",
    "in_time": "00:00:00",
    "out_time": "00:00:00",
    "in_deficit": "",
    "out_deficit": "",
    "wt": "00:00:00"
  }, {
    "id": "43",
    "emp_name": "Raman Kumar (10010)",
    "date": "2017-09-12",
    "in_time": "00:00:00",
    "out_time": "00:00:00",
    "in_deficit": "",
    "out_deficit": "",
    "wt": "00:00:00"
  }, {
    "id": "88",
    "emp_name": "Anish Gupta (10012)",
    "date": "2017-09-11",
    "in_time": "21:10:00",
    "out_time": "06:28:00",
    "in_deficit": "-00:50:00",
    "out_deficit": "00:32:00",
    "wt": "09:18:00"
  }, {
    "id": "42",
    "emp_name": "Raman Kumar (10010)",
    "date": "2017-09-11",
    "in_time": "22:30:00",
    "out_time": "07:10:00",
    "in_deficit": "00:30:00",
    "out_deficit": "-00:10:00",
    "wt": "08:40:00"
  }],
  "draw": 2
}

正在从客户端推送tblOpr列数据,因此不必担心该列数据 但我的数据表正在推送错误索引的数据。从开始跳过3列。

enter image description here

您可以在此屏幕截图中看到。在time列中,数据位于Edit列,out time列数据位于employee列...与上一列我们的工作列数据相同的方式进入时间栏。

如果有人对此有任何疑问,请尽快回复。

1 个答案:

答案 0 :(得分:0)

没有提到如何将数据传递给DataTables ......

在这个CodePen中,我假设您这样做:"data":json.data,其中json是我在示例中用来保存您发布的数据的变量名称。

然后,你遇到的问题是9列,但只有8列数据 您必须告诉DataTables如何处理没有数据的额外列。

我认为这是&#34;编辑&#34;列。

"data": null,
"defaultContent": "<button>Click!</button>",

"data": null非常自我解释。然后,您必须为该列提供一些内容。在这里,我刚刚添加了一个按钮。