如何实现DataTables按钮文本在页面重载后持久化不恢复初始值

以下提供两种可直接落地的实现方案，可根据你的实际需求选择：

方案1：localStorage前端持久化 #

无需修改后端逻辑，仅在当前浏览器生效，适合不需要跨设备同步的场景：

实现逻辑 #

• 以每行数据的唯一id作为标识，将所有已点击过的id集合存在localStorage中
• 放弃原defaultContent配置，改用render函数动态渲染按钮，渲染时判断当前行id是否在已点击集合中，自动匹配按钮文本
• 点击按钮时同步更新localStorage中的已点击集合

修正后完整代码 #

$(document).ready(function() {
    // 初始化从localStorage读取已点击的id集合
    const viewedIds = JSON.parse(localStorage.getItem('viewed_todo_ids') || '[]')

    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 }
        ],
       "columnDefs": [
         { targets: 0, width: "150px", className: 'dt-body-center'},
         { targets: 1, width: "150px", className: 'dt-body-center'},
         { targets: 2, width: "150px", className: 'dt-body-center'},
         { targets: -1, width: "150px", 
           className: 'dt-body-center',
           // 动态渲染按钮
           render: function(data, type, row) {
               return `<button class="btnDetails" data-id="${row.id}">${viewedIds.includes(row.id) ? 'View' : 'Click'}</button>`
           }
        }]});

  $('#example tbody').on('click', '.btnDetails', function () {
       const currentId = $(this).data('id')
       $(this).text("View")
       // 同步更新localStorage
       let updateIds = JSON.parse(localStorage.getItem('viewed_todo_ids') || '[]')
       if(!updateIds.includes(currentId)) {
           updateIds.push(currentId)
           localStorage.setItem('viewed_todo_ids', JSON.stringify(updateIds))
       }
  });  
});

注：该方案同时修复了原代码中按钮闭合标签写错、多个按钮重复使用相同id的规范问题。

方案2：PHP服务端持久化 #

需要配合后端修改，支持跨设备同步、永久存储，适合多端使用的场景：

实现逻辑 #

1. 数据库对应的业务表新增is_viewed字段，类型为tinyint(1)，默认值为0（0代表未点击，1代表已点击）
2. 后端列表查询接口返回数据时，将is_viewed字段和其他业务字段一起返回
3. 点击按钮时发送异步请求到PHP后端，更新对应id的is_viewed状态为1
4. DataTables渲染按钮时，根据接口返回的is_viewed值判断显示的文本

参考PHP后端代码 #

// 更新按钮状态接口 update_view.php
<?php
// 连接数据库
$pdo = new PDO('mysql:host=你的数据库地址;dbname=你的库名;charset=utf8', '数据库账号', '数据库密码');
$todoId = $_GET['id'];
// 更新状态
$stmt = $pdo->prepare("UPDATE 你的表名 SET is_viewed = 1 WHERE id = ?");
$stmt->execute([$todoId]);
echo json_encode(['code' => 200, 'msg' => '更新成功']);
?>

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