在我的react数据表中,我想向动态数据的每一行添加编辑按钮。 在react datatable.net-bs4中, 我无法将按钮与数据绑定。我想在每行数据中添加编辑按钮。请友好地解决此问题...
_setDataInTable(list){
var table;
if ($.fn.dataTable.isDataTable('#dataTables-category')) {
table = $('#dataTables-category').dataTable();
table.fnClearTable();
table.fnDestroy();
$('#dataTables-category').empty()
}
//if (list.length > 0) {
var l = []
for (var i = 0; i < list.length; i++) {
const data = list[i]
const obj = {
No: data.id,
categoryNameByMM: data.categoryNameByMM,
categoryNameByEg: data.categoryNameByEg,
creationDate: data.creationDate,
active: data.active,
edit:
<button className="btn btn-primary btn-sm" data-toggle="modal"
data-target="#editModal">
<i className="fa fa-cogs"></i> Edit
</button>
}
l.push(obj)
}
table = $("#dataTables-category").DataTable({
data: l,
columns: [
{ title: "No", data: "No" },
{ title: "Category Name in Myanmar", data: "categoryNameByMM" },
{ title: "Category Name in Myanmar", data: "categoryNameByEg" },
{ title: "Creation Date", data: "creationDate" },
{ title: "Active", data: "active" },
{ title: "Edit", data: "edit" }
],
autofill: true,
bLengthChange: false,
bInfo: false,
responsive: true,
paging: false,
buttons: true,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf'
]
});
}
render(){
return (
<div>
<h1 className="page-header">Category Setup</h1>
<button className="btn btn-primary btn-sm mb20" data-toggle="modal" data-target="#mymodal">
<i className="fa fa-user-plus"></i> Add New
</button>
<div className="panel pagination-primary clearfix m-b-0">
<div className="table-responsive" style={{ overflow: 'hidden' }}>
<table width="99%"
className="table table-striped table-bordered table-hover responsive nowrap"
id="dataTables-category"
/>
</div>
</div>
)}