DataTable 为每一行添加一个按钮

Question

使用 DataTable API，我正在创建一个 table 并添加一个按钮 - 'Click' 到每个 table 行。下面的示例 link：

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

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

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

Answer 1

您需要一个数据库来保存按钮的状态。检查以下 link 服务器端处理：

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

DataTable 为每一行添加一个按钮

DataTable add a button to each row

html

datatable

jquery

html-table

datatables