使用jQuery DataTables插件实现按钮点击添加标题至无序列表

我来帮你搞定这个需求，下面是完整的可运行示例，包含HTML结构和JavaScript逻辑，你可以直接参考使用：

首先是页面的HTML结构，需要包含DataTables的表格容器、触发按钮，以及用来存放标题的无序列表：

<!-- 引入jQuery和DataTables依赖 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<!-- 页面元素 -->
<button id="addTitlesBtn">添加标题到列表</button>
<table id="myTable" class="display" style="width:100%"></table>
<ul id="titlesList"></ul>

接下来是JavaScript部分，我们会初始化DataTables，并且给按钮绑定点击事件，实现标题添加功能：

// 你的数据源（注意修正了拼写错误：curreny → currency）
const results = {
  "generalInfo": [
    { 
      "title": "title1", 
      "permalink": "www.link.com", 
      "manufacturer": "manufacturer1", 
      "img": "https://images-na.ssl-images-test.com/images/asdfIdR/5adf1vELadfZeiMML.jpg", 
      "currency": "$", 
      "price": "64.00", 
      "availability": "Usually ships in 24 hours"
    },
    { 
      "title": "title2", 
      "permalink": "www.link2.com", 
      "manufacturer": "manufacturer2", 
      "img": "https://images-na.ssl-images-test.com/images/asdfIdR/anotherImg.jpg", 
      "currency": "$", 
      "price": "99.00", 
      "availability": "In stock"
    }
    // 更多数据...
  ]
};

$(document).ready(function() {
  // 初始化DataTables表格
  const table = $('#myTable').DataTable({
    data: results.generalInfo,
    columns: [
      { data: 'title', title: '标题' },
      { data: 'manufacturer', title: '厂商' },
      { data: 'price', title: '价格' },
      { data: 'availability', title: '库存状态' }
    ]
    // 如果需要行选择功能，添加下面这行
    // select: true
  });

  // 给按钮绑定点击事件
  $('#addTitlesBtn').on('click', function() {
    const $titlesList = $('#titlesList');
    
    // 可选：清空列表之前的内容
    $titlesList.empty();

    // 方式1：添加所有数据中的标题到列表
    results.generalInfo.forEach(item => {
      $titlesList.append(`<li>${item.title}</li>`);
    });

    // 方式2：如果开启了行选择，只添加选中行的标题
    // table.rows({ selected: true }).data().forEach(item => {
    //   $titlesList.append(`<li>${item.title}</li>`);
    // });
  });
});

关键说明： #

• 我修正了你数据源里的拼写错误：curreny改为currency，避免后续可能出现的问题
• 提供了两种添加标题的方式：一种是把所有数据里的标题都添加到列表，另一种是只添加表格中选中行的标题（需要开启select: true配置）
• 点击按钮时，会先清空列表（如果不需要清空，可以去掉$titlesList.empty()这行），然后逐个添加标题为列表项

内容的提问来源于stack exchange，提问作者Carol.Kar