从第二列开始填充数据表

Posted 2023-05-08

【中文标题】从第二列开始填充数据表

【英文标题】：Populate a datatable starting from the second column

【发布时间】：2020-06-29 06:07:58

【问题描述】：

我有一个从 api 检索 json 数据的数据表。表格的第一列应该只包含一个复选框。但是，在检索数据时，它也会填充第一列。

$.getJSON('https://api.myjson.com/bins/o44x', function(json) 
      $('#parametrictable').DataTable(
      data : json.data,
      columns : json.columns,

      columnDefs: [ 
        orderable: false,
        className: 'select-checkbox',
        targets:   0
     ],
    select: 
        style:    'os',
        selector: 'td:first-child'
    ,
    order: [[ 1, 'asc' ]]
   )
 ); 

有什么方法可以设置数据只从第二列开始填充，而第一列只包含复选框？

【参考方案1】：

您可以通过更新 api 或在您的 js 代码中解决此问题，只需将 json.columns 数组中的第一个对象的 data 键值更新为 null，例如：

$.getJSON('https://api.myjson.com/bins/o44x', function(json) 
   json.columns[0].data = null;
   json.columns[0].defaultContent = '';

   $('#parametrictable').DataTable(
      data: json.data,
      columns: json.columns,
      .... your rest of code
   )
);

编辑：

我的意思是你的建议只是隐藏与复选框重叠的数据。我不想把它隐藏起来。我希望第一列默认情况下只有复选框。重叠的数据应该在第二列。

您可以像这样更新您的 API 来实现：

"columns": [
   
      "data": null,
      "defaultContent": ""
   ,
   
      "data": "DT_RowId",
      "title": "Id"
   ,
   
      "data": "supplier",
      "title": "supplier"
   ,
   
      "data": "color",
      "title": "color"
   
],

或者，您可以在不修改 API 的情况下更新代码，例如：

$.getJSON('https://api.myjson.com/bins/o44x', function(json) 

   // Add object for checkbox at first position
   json.columns.unshift("data": null, "defaultContent": "");

   $('#parametrictable').DataTable(
      data: json.data,
      columns: json.columns,
      ....your rest of code
   )
);

【讨论】：

这只删除了第一列的数据。我仍然需要数据，只是不在第一列。

您可以轻松获取选定的行数据，例如：table.rows('.selected').data();。这是一个演示：JS Fiddle。使用复选框选择一行，然后单击Get Selected Rows 按钮，它会显示选定的行数据。

不，我的意思是您的建议只是隐藏与复选框重叠的数据。我不想把它隐藏起来。我希望第一列默认情况下只有复选框。重叠的数据应该在第二列。

然后您可以简单地更新您的 api 以在下一个索引中传递新对象。我已经更新了代码以显示这一点，然后您无需对 js 代码进行任何更改。

您可以简单地在第一个位置添加一个新对象。代码已更新。