将数组插入现有数据表 javascript

Question

我有一个数据表，我在其中使用表单手动插入数据

这是我的数据表

我正在尝试使用导入按钮创建导入 CSV 函数

我想将 dataTable.rows.add（例如）与我获得 CSV 后的数组一起使用，

这是我想添加到 table

的数组结果

[{"URL":"htpp://www.google.com2","Business Type":"Restaurant2"},{"URL":"htpp://www.google.com3","Business Type":"Hotel"}]

如何将此数据添加到我的 table？实际上，我的数据表已经用这段代码初始化了

let dataTable = $('#task-place-table').DataTable({
        processing: true,
        autoWidth: false,
        responsive: true,
        dom: '<t>ip',
        order: [0, 'asc'],
        language: {
           "url": '{{session('locale') == 'en' ? "//cdn.datatables.net/plug-ins/1.10.20/i18n/English.json" : "//cdn.datatables.net/plug-ins/1.10.20/i18n/Japanese.json"}}',
        "buttons": {
        "reload": '{{__('tableButtons.reload')}}'
                    }
                }
            });

我使用此代码

row.add 添加带有“添加位置”按钮的行

  dataTable.row.add([
     itemCounter,
     placeUrl,
     businessType[0].text,
     '<button id="btn-remove-' + itemCounter + '" class="btn btn-outline btn-primary btn-xs deleted" ' +
      'data-id="' + itemCounter + '" data-toggle="tooltip" title="Delete" type="button"><i class="fa fa-trash"></i></button>'
     ]).draw(false);

其实placeUrl, itemCounter, businessType都是通过document.getElementById.value

的表单元素获取的

尊敬的结果是这样

Item = itemCounter (this is already calculated)
Place URL = first data in array
Business Type = second data in array

我的HTMLtable只有这个

<table id="task-place-table" class="table table-striped table-bordered table-hover">
       <thead>
         <tr>
           <th class="desktop mobile">{{__('task.columns.item')}}</th>
           <th class="desktop tablet mobile">{{__('task.columns.place_url')}}</th>
           <th class="desktop tablet">{{__('task.columns.business_type')}}</th>
           <th class="desktop">{{__('task.columns.actions')}}</th>
         </tr>
       </thead>
      <tbody></tbody>
 </table>

感谢阅读本文:)

Answer 1

我假设您的 add 函数已经适用于单个对象 { URL: 'some URL', 'Business Type': 'some text' } 并将其称为 add() - 只需将其替换为您的实际函数

如果是这样，那么您可以在数组上使用 .forEach()，如下所示：

const arr = [
  { "URL": "http://www.google.com2", "Business Type": "Restaurant2" }, 
  { "URL": "http://www.google.com3", "Business Type": "Hotel" }
]

arr.forEach(item => dataTable.row.add([
  itemCounter,
  item['URL'],
  item['Business Type'],
  `<button id="btn-remove-${itemCounter}" class="btn btn-outline btn-primary btn-xs deleted" data-id="${itemCounter}" data-toggle="tooltip" title="Delete" type="button"><i class="fa fa-trash"></i></button>`
]).draw(false))

如果这不起作用或者我误解了问题，请告诉我，我会尽力解决

Answer 2

您需要做的就是遍历数组并将值放在它们所属的位置。

const result = [{"URL":"url1","Business Type":"Restaurant2"},{"URL":"url2","Business Type":"Hotel"}];

for (let item of result) {
  dataTable.row.add([
     itemCounter,
     item["URL"],
     item["Business Type"],
     '<button id="btn-remove-' + itemCounter + '" class="btn btn-outline btn-primary btn-xs deleted" ' +
      'data-id="' + itemCounter + '" data-toggle="tooltip" title="Delete" type="button"><i class="fa fa-trash"></i></button>'
     ]).draw(false);
  itemCounter++;
}

将数组插入现有数据表 javascript

Insert an array to existing datatable javascript

javascript

add

rows

datatables