带按钮的 DataTable，将元素附加到列表

Question

我正在使用来自 jquery 的数据表插件，并在我的数据表中添加了一个按钮。按下按钮时，我想将元素标题添加到无序列表元素中。

在下面找到我的最小可行示例：

const results = {
  "generalInfo": [{
      "title": "title1",
      "permalink": "www.link.com",
      "manufacturer": "manufacturer1",
      "img": "https://images-na.ssl-images-test.com/images/asdfIdR/5adf1vELadfZeiMML.jpg",
      "curreny": "$",
      "price": "64.00",
      "availability": "Usually ships in 24 hours",
    },
    {
      "title": "title2",
      "permalink": "www.link.com",
      "manufacturer": "manufacturer2",
      "img": "https://images-na.ssl-images-test.com/images/I/51adfkLhadsfgACH0L.jpg",
      "curreny": "$",
      "price": "59.99",
      "availability": "Usually ships in 24 hours",
    }
  ]
}

//transform data set
let dataSet = results.generalInfo.map((item, i) => [
  i + 1,
  `<img src="${item.img}" alt="${item.title}" height="42" width="42">
                 <a href="<?php the_permalink();?>">
                     ${item.title}
                 </a>`,
  item.manufacturer,
  `<div>${item.currency} ${item.price}</div>`,
  item.availability,
  `<button id="addButton" type="button" onClick="${this.addToResults.bind(item)}">
                    Add
                </button>`,
  `<a class="btn btn-primary" target="_blank" role="button">
                    Buy
                </a>`
])

$('#table_id').DataTable({
  data: dataSet,
  destroy: true,
  columns: [{
      title: "#"
    },
    {
      title: "Title"
    },
    {
      title: "Manufacturer"
    },
    {
      title: "Price"
    },
    {
      title: "Availability"
    },
    {
      title: ""
    },
    {
      title: ""
    }
  ]
})

function addToResults(item) {

  $("ul").append(`<li>${item.title}</li>`);

}

<link href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="table_id" class="display" style="width:100%"></table>

<h1>Results:</h1>
<ul>

</ul>

当我按下按钮时，我收到一条错误消息并且没有附加文本。

任何建议我做错了什么？

Answer 1

与其将项目绑定到您的内联 JS 处理程序（我真的不鼓励人们这样做，因为内联 JS 实在是太糟糕了），您真正想要的只是对 results.generalInfo 数组的引用，这样您就可以从中取出正确的物品。

在这种情况下，这就足够了：

1. 为您的按钮分配一个类，而不是一个 ID（ID 必须是唯一的），例如 <button class="addButton" ... />。
2. 存储对相关项目的不变引用。这就像将索引存储在 data- 属性中一样简单，例如<button data-item-index="${i}" class="addButton" ... />
3. 将单击事件处理程序绑定到该类

4. 在点击事件处理程序中，从data-item-index 检索值并将其用作访问results.generalInfo 中的原始项目的键。请记住 data- 属性总是返回 string ，因此使用 + 操作将其强制转换为整数：

   $('#table_id').on('click', 'button.addButton', function() {
     const itemIndex = +$(this).data('item-index');
     const item = results.generalInfo[itemIndex];
     $("ul").append(`<li>${item.title}</li>`);
   });
   

请参阅下面的概念验证 sn-p：

const results = {
  "generalInfo": [{
      "title": "title1",
      "permalink": "www.link.com",
      "manufacturer": "manufacturer1",
      "img": "https://images-na.ssl-images-test.com/images/asdfIdR/5adf1vELadfZeiMML.jpg",
      "curreny": "$",
      "price": "64.00",
      "availability": "Usually ships in 24 hours",
    },
    {
      "title": "title2",
      "permalink": "www.link.com",
      "manufacturer": "manufacturer2",
      "img": "https://images-na.ssl-images-test.com/images/I/51adfkLhadsfgACH0L.jpg",
      "curreny": "$",
      "price": "59.99",
      "availability": "Usually ships in 24 hours",
    }
  ]
}

//transform data set
let dataSet = results.generalInfo.map((item, i) => [
  i + 1,
  `<img src="${item.img}" alt="${item.title}" height="42" width="42">
                 <a href="#">
                     ${item.title}
                 </a>`,
  item.manufacturer,
  `<div>${item.currency} ${item.price}</div>`,
  item.availability,
  `<button class="addButton" type="button" data-item-index="${i}">
                    Add
                </button>`,
  `<a class="btn btn-primary" target="_blank" role="button">
                    Buy
                </a>`
]);

$('#table_id').on('click', 'button.addButton', function() {
  const item = results.generalInfo[+$(this).data('item-index')];
  $("ul").append(`<li>${item.title}</li>`);
});

$('#table_id').DataTable({
  data: dataSet,
  destroy: true,
  columns: [{
      title: "#"
    },
    {
      title: "Title"
    },
    {
      title: "Manufacturer"
    },
    {
      title: "Price"
    },
    {
      title: "Availability"
    },
    {
      title: ""
    },
    {
      title: ""
    }
  ]
});

<link href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="table_id" class="display" style="width:100%"></table>

<h1>Results:</h1>
<ul>

</ul>