【发布时间】：2021-11-06 01:33:23
【问题描述】：
我正在开发一个包含 JQuery 数据表的 Web 应用程序，但遇到了一些问题。
我正在使用detailsTable.on('click', 'button.edit', function () { ... }) 函数来捕捉带有“编辑”类的按钮上的点击事件。它工作得很好，我发现我可以使用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"
});
});
【问题讨论】：
-
查看 DataTables select 选项，我认为这就是您要找的。您需要在表的初始化关闭后添加事件处理程序。你能提供一些可重现的代码吗？
-
不清楚（对我来说）你到底想做什么。您是否尝试访问 DOM node，而不是行 data？否则，带有数据和预期结果的示例或 minimal reproducible example 可能会有所帮助。
-
@andrewjames 在进一步查看文档后，我不知道如果没有付费的Editor Extension，这是否可能。我知道您能够获取行数据以及 DOM 节点，但我认为您只能使用基本数据表删除它？
-
@BeerusDev - 您可以使用基本（免费）DataTables 产品更改数据和 HTML。
-
感谢您的澄清 - 这很有帮助。只是要指出：您的问题中的代码中有几个拼写错误-它不会运行，因此它不是您实际使用的代码。我怀疑这些只是复制/粘贴问题：
]选项没有关闭columnDefs；并且('click')on('click',缺少.。
标签： javascript html jquery datatables