DataTable 为每一行添加一个按钮答案

【问题标题】：DataTable add a button to each rowDataTable 为每一行添加一个按钮
【发布时间】：2022-01-06 18:48:58
【问题描述】：

使用 DataTable API，我正在创建一个表格并添加一个按钮 - '单击'到每个表格行。下面的示例链接：

https://datatables.net/examples/ajax/null_data_source.html

单击时，我将文本更改为“查看”。因此，在页面重新加载后，所有显示默认文本的按钮 - “单击”，如何使用文本呈现一些按钮 - “单击”，而其他被单击的按钮 - “查看”。请专家分享您的意见！

$(document).ready(function() {
    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, className: 'dt-body-center'},
         { targets: 1, className: 'dt-body-center'},
         { targets: 2, className: 'dt-body-center'},
         { targets: -1, width: "150px", 
           className: 'dt-body-center', defaultContent:         
           "<button id='btnDetails'>Click</buttom>" }
        ]});

  $('#example tbody').on('click', '[id*=btnDetails]', function () {
       $(this).text("View");
  });  
});

<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>        
    <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"  rel="stylesheet">
  <script      src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </script>
 <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js">  </script>
  </head>
  <body>
  <table id="example" class="display cell-border compact stripe"    style="width:100%">
        <thead>
            <tr>
                <th>User Id</th>
                <th>Id</th>
                <th>Title</th> 
                <th>Status</th>
            </tr>
        </thead>
  </table>
  </body>
</html>

【问题讨论】：

"如何渲染一些带有文本'Click'的按钮而其他带有'View'的按钮" - 确定是否显示Click与@的标准是什么987654325@?
点击我将文本更改为“查看”。因此，在页面重新加载后，我想渲染一些带有文本的按钮 - 'Click' 而其他按钮则显示默认文本 - 'Click' 而其他按钮 - 'View'
谢谢。您可以将注释添加到问题中。我还不是特别清楚你想要什么。听起来您需要在某处保存“点击了什么”状态 - 但它是每个浏览器会话的状态，还是系统范围的状态，还是其他状态？
是的，我想保存状态，以便在终止浏览器或页面重新加载后，按钮文本应保持并显示“视图”。因为，我们使用 defaultContent 来添加按钮，所以每次它都显示“点击”。
是的，但是什么状态？每个浏览器会话？全球范围内？当用户 A 刷新他们的页面时，用户 A 是否应该看到用户 B 点击了什么？并将您的更新添加到问题中。（如果只是每个浏览器，您可以使用 Javascript 会话存储 API 进行研究。）

标签： html jquery html-table datatable datatables

【解决方案1】：

您需要一个数据库来保持按钮的状态。检查以下链接以进行服务器端处理：

https://datatables.net/examples/data_sources/server_side.html

【讨论】：

您不需要使用 DataTables 的服务器端处理来将状态保存在数据库中。