将数组插入现有数据表 javascript

问题描述

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

这是我的数据表

我尝试使用导入按钮创建导入 CSV 功能

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

这是我想添加到表格中的数组结果

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

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

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

我的 HTML 表格只有这个

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

感谢您阅读本文:)

解决方法

我假设您的 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))

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

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

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++;
}

add add add datatables javascript rows