JQuery 数据表事件修改按钮

Question

我正在开发一个包含 JQuery 数据表的 Web 应用程序，但我运行遇到了一些问题。

我正在使用 detailsTable.on('click', 'button.edit', function () { ... }) 函数来捕获带有 class“编辑”按钮的点击事件。它工作得很好，我发现我可以使用 detailsTable.row($(this).parents('tr')).data(); 获取行数据。但它只包含我在 ajax 调用中收到的数据。

我的想法是把我点击的那个按钮的html改一下，但是找不到解决方法，怎么修改。（我只想修改这一行。）

有什么想法吗？

我的html:

<table id="datatable" class="table table-bordered table-striped table-hover table-sm table-head-fixed">
 <thead>
  <tr>
   <th>Value 1</th>
   <th>Value 2</th>
   <th>Actions</th>
  </tr>
 </thead>
</table>

我的javascript:

$(function () {
  var mytable = $("#datatable").DataTable({
    "ajax": {"url": "", dataSrc: "data"},
    "columns": [
      { "data": "val_2" },
      { "data": "val_1" }
    ],
    "columnDefs": [
      {
        "targets": 2,
        "render": function ( data, type, full, meta ) {
          return '<button type="button" class="edit btn btn-info btn-sm" data-subid="'+full['id']+'"><i class="fa fa-wrench"> Edit</i></button>';
        },
      },
    }
  });

  $('#datatable tbody').off('click')on('click', 'button.edit', function () { // Delete token
    var data = mytable.row($(this).parents('tr')).data();

    // I'd like to change the button, (I need to change the title, the fa-icon and the class, so basicely the whole html) like the way i did with "columnDefs"
  });
});

Answer 1

您可以使用 node() 访问节点，而不是使用 data() 访问源数据值。另外，因为你想改变点击的按钮，你可以获取放置按钮的单元格的 <td> 节点，而不是获取行：

var td =  mytable.cell($(this).parents('td')).node();

然后可以使用 jQuery 或 JavaScript 进行操作 - 例如：

$( td ).find( 'button' ).html('I was ckicked');

演示：

var dataSet = [
    {
      "id": "123",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "0,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "456",
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "2,000",
      "start_date": "2011/01/25",
      "office": "New York",
      "extn": "4226"
    },
    {
      "id": "567",
      "name": "Cedric Kelly",
      "position": "Senior Javascript Developer",
      "salary": "3,060",
      "start_date": "2012/03/29",
      "office": "Edinburgh",
      "extn": "6224"
    },
    {
      "id": "432",
      "name": "Airi Satou",
      "position": "Accountant",
      "salary": "2,700",
      "start_date": "2008/11/28",
      "office": "Tokyo",
      "extn": "5407"
    },
    {
      "id": "987",
      "name": "Brielle Williamson",
      "position": "Integration Specialist",
      "salary": "2,000",
      "start_date": "2012/12/02",
      "office": "New York",
      "extn": "4804"
    }
  ];

$(document).ready(function() {

var mytable = $('#datatable').DataTable( {
  lengthMenu: [ [2, -1] , [2, "All"] ],
  data: dataSet,
  columns: [
    { title: "ID", data: "id" },
    { title: "Name", data: "name" },
    { title: "Office", data: "office" },
    { title: "Position", data: "position" },
    { title: "Start date", data: "start_date" },
    { title: "Extn.", data: "extn" },
    { title: "Salary", data: "salary" }
  ],
  
  "columnDefs": [
    {
      "targets": 2,
      "render": function ( data, type, full, meta ) {
        return '<button type="button" class="edit btn btn-info btn-sm" data-subid="'+full['id']+'"><i class="fa fa-wrench"> Edit</i></button>';
      },
    },
  ]  

} ); 

$('#datatable tbody').off('click').on('click', 'button.edit', function () { // Delete token
  var td =  mytable.cell($(this).parents('td')).node();
  $( td ).find( 'button' ).html('I was ckicked');
});
  

} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

    <table id="datatable" class="display dataTable cell-border" style="width:100%">
    </table>

</div>


</body>
</html>

JQuery 数据表事件修改按钮

JQuery datatable event modify button

html

javascript

jquery

datatables