React - 如何为 Datatables 中每一行的按钮添加 onclick 函数
React - How to add onclick function to buttons in each row in Datatables
我正在尝试向我的数据表中的每一行添加:编辑和删除按钮,但单击这些按钮不会执行在“onclick”
中声明的功能
$(schedTableID).DataTable({
data: schedData.data,
order: [[0, "asc"]],
columns: [
{ data: "id",render: function(data, type, row) { return data; }, },
{ data: "timein", render: function(data, type, row) { return data; }, },
{ data: "timeout", render: function(data, type, row) { return data; }, },
{ data: "slot", render: function(data, type, row) { return data; }, },
{ data: "session", render: function(data, type, row) { return data; }, },
{ data: "schedule", render: function(data, type, row) { return data; }, },
{ data: "statuss", render: function(data, type, row) { return data; }, },
{ data: "id", render:
function(data, type, row) {
return(
`
<button class="m-0 p-2 px-2 btn btn-success feather icon-check" data-toggle="button" id="${data}" onClick="${deleteHandler}"></button>
<button class="m-0 p-2 px-2 btn btn-danger feather icon-x" data-toggle="button" id="${data}" onclick="${deleteHandler}"></button>
`
)
},
},
],
pageLength: 5,
lengthMenu: [
[5, 10, 25, 50, 100, -1],
[5, 10, 25, 50, 100, "Show All"],
],
});
这是 onclick 函数
const deleteHandler = (e) => {
console.log(123123)
}
const checkHandler = (e) => {
console.log(123123)
}
我用的是jquery
$(document).ready(function () {
$('#data-table-admin').unbind('click').on('click', '.btn-edit', function () {
let table = $('#data-table-admin').DataTable();
//retrieve table id, etc. (table.row($(this).parents('tr')).data().id)
//function here
});
$('#data-table-admin').on('click', '.btn-delete', function () {
let table = $('#data-table-admin').DataTable();
//retrieve table id, etc. (table.row($(this).parents('tr')).data().id)
//functionality here
});
});
我正在尝试向我的数据表中的每一行添加:编辑和删除按钮,但单击这些按钮不会执行在“onclick”
中声明的功能$(schedTableID).DataTable({
data: schedData.data,
order: [[0, "asc"]],
columns: [
{ data: "id",render: function(data, type, row) { return data; }, },
{ data: "timein", render: function(data, type, row) { return data; }, },
{ data: "timeout", render: function(data, type, row) { return data; }, },
{ data: "slot", render: function(data, type, row) { return data; }, },
{ data: "session", render: function(data, type, row) { return data; }, },
{ data: "schedule", render: function(data, type, row) { return data; }, },
{ data: "statuss", render: function(data, type, row) { return data; }, },
{ data: "id", render:
function(data, type, row) {
return(
`
<button class="m-0 p-2 px-2 btn btn-success feather icon-check" data-toggle="button" id="${data}" onClick="${deleteHandler}"></button>
<button class="m-0 p-2 px-2 btn btn-danger feather icon-x" data-toggle="button" id="${data}" onclick="${deleteHandler}"></button>
`
)
},
},
],
pageLength: 5,
lengthMenu: [
[5, 10, 25, 50, 100, -1],
[5, 10, 25, 50, 100, "Show All"],
],
});
这是 onclick 函数
const deleteHandler = (e) => {
console.log(123123)
}
const checkHandler = (e) => {
console.log(123123)
}
我用的是jquery
$(document).ready(function () {
$('#data-table-admin').unbind('click').on('click', '.btn-edit', function () {
let table = $('#data-table-admin').DataTable();
//retrieve table id, etc. (table.row($(this).parents('tr')).data().id)
//function here
});
$('#data-table-admin').on('click', '.btn-delete', function () {
let table = $('#data-table-admin').DataTable();
//retrieve table id, etc. (table.row($(this).parents('tr')).data().id)
//functionality here
});
});