Question

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

在下面找到我最不可行的例子：

＆＃13;

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>`);

}

＆＃13;

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

＆＃13;

当我按下按钮时，我收到一条错误消息，但未附加文字。

有什么建议我做错了吗？

Answer 1

不是将项目绑定到你的内联JS处理程序（我真的不鼓励人们这样做，因为内联JS很简单），你真正想要的只是一个回到results.generalInfo数组的引用，这样你可以从中拉出正确的物品。

在这种情况下，这应该足够了：

为您的按钮分配一个类，而不是ID（ID必须唯一），比如<button class="addButton" ... />。
存储对相关项目的不变引用。这就像在data-属性中存储索引一样简单，例如<button data-item-index="${i}" class="addButton" ... />
将点击事件处理程序绑定到该类
在点击事件处理程序中，从data-item-index检索值并将其用作关键字以访问results.generalInfo中找到的原始项目。请记住，data-属性始终返回字符串，因此请使用+操作强制将其转换为整数：
```
$('#table_id').on('click', 'button.addButton', function() {
  const itemIndex = +$(this).data('item-index');
  const item = results.generalInfo[itemIndex];
  $("ul").append(`<li>${item.title}</li>`);
});
```

请参阅下面的概念验证摘要：

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>

带按钮的DataTable，追加要列出的元素

1 个答案: