为DataTable每行添加按钮，页面重载后如何保留按钮点击状态？

核心思路是使用浏览器本地存储localStorage持久化记录已点击的行唯一标识，表格每次渲染时根据存储的标识动态设置按钮文本。

你原有代码存在一个小问题：所有按钮使用了相同的idbtnDetails，HTML规范中id不能重复，我们先将按钮改为class标识。

具体修改点 #

• 初始化时读取本地存储中已点击的行ID集合
• 将按钮的静态默认内容改为动态渲染函数，根据当前行ID是否在已点击集合中决定按钮文本
• 点击按钮时将当前行ID存入本地存储

完整修改后的JS代码 #

$(document).ready(function() {
    // 初始化读取已点击的行ID集合
    const clickedIds = JSON.parse(localStorage.getItem('clickedTodoIds') || '[]');

    var table = $('#example').DataTable( {
      "ajax": {
          "type": "get",
          "url": "https://jsonplaceholder.typicode.com/todos",            
          "dataType": "json",
          "dataSrc": function (json) {
                 var return_data = new Array();
                 for (var i = 0; i < json.length; i++) {
                     return_data.push({
                         'userId': json[i].userId,
                         'id': json[i].id,
                         'title': "Test Data"
                     })
                 }
                 return return_data;
          }
      },
      "columns": [
             { 'data': 'userId' },             
             { 'data': 'id' },
             { 'data': 'title' },
             { 
               'data': null,
               // 动态渲染按钮
               "render": function (data, type, row) {
                 const btnText = clickedIds.includes(row.id) ? 'View' : 'Click';
                 return `<button class="btnDetails">${btnText}</button>`;
               }
             }
        ],
       "columnDefs": [
         { targets: 0, className: 'dt-body-center'},
         { targets: 1, className: 'dt-body-center'},
         { targets: 2, className: 'dt-body-center'},
         { targets: -1, width: "150px", className: 'dt-body-center' }
        ]});

  $('#example tbody').on('click', '.btnDetails', function () {
       // 获取当前行数据
       const row = table.row($(this).parents('tr')).data();
       // 如果ID没存过就存入本地存储
       if (!clickedIds.includes(row.id)) {
         clickedIds.push(row.id);
         localStorage.setItem('clickedTodoIds', JSON.stringify(clickedIds));
       }
       $(this).text("View");
  });  
});

补充说明 #

如果需要实现跨设备同步按钮状态，可将点击记录上传到服务端存储，表格初始化时从接口拉取已点击ID集合即可，逻辑和本地存储一致。

内容的提问来源于stack exchange，提问作者Avneet Singh