不带操作按钮的数据表(javascript)

Question

在mdbootstrap数据表中放入一些操作按钮时遇到问题我以他们为例，但没有获取数据，我需要从数据库中获取数据记录存在，但按钮没有，我需要它们来获得我需要的结果这是我的javascript代码

$(document).ready(function () {
const customDatatable = document.getElementById('datatable-custom');
const columns = [
{ label: 'ID', field: 'idAtividade', width: 25 },
{ label: 'Atividade', field: 'atividade', width: 175 },
{ label: 'Projeto', field: 'nome', width: 150 },
{ label: 'Aulas', field: 'haveClasses', width: 25 },
{ label: 'Orçamento', field: 'orcamento', width: 25 },
{ label: 'Data', field: 'dataAtividade', width: 100 },
{ label: 'Hora', field: 'hora', width: 50 },
{ label: 'Local', field: 'local', width: 150 },
{ label:'Opções', field: '',sort: false }
];
const rows = [
fetch('./controllers/Atividades.php?type=listar')
.then((data) => data.json())
.then((data) => {
const parser = new DataParser('datatable', {
rows: {start: 30, end: 100},
keys: columns.map((column) => column.field),
});
const { rows } = parser.parse(data);
datatableInstance.update({ rows }, { loading: false });
}),
];

const setActions = () => {
document.getElementsByClassName('call-btn').forEach(btn => {
btn.addEventListener('click', () => {
console.log(`call ${btn.attributes['data-mdb-number'].value}`)
})
})
document.getElementsByClassName('message-btn').forEach(btn => {
btn.addEventListener('click', () => {
console.log(`send a message to ${btn.attributes['data-mdb-email'].value}`)
})
})
};

customDatatable.addEventListener('render.mdb.datatable', setActions);
const datatableInstance = new mdb.Datatable(customDatatable,
{ columns },{
rows: [
rows
].map((row) => {
console.log("aqui");
return {
...row,
contact: `<button class="call-btn btn btn-outline-primary btn-floating btn-sm" data-mdb-number="${row.phone}"><i class="fa fa-phone"></i></button>
<button class="message-btn btn ms-2 btn-primary btn-floating btn-sm" data-mdb-email="${row.email}"><i class="fa fa-envelope"></i></button>`,
};
}),
},
{ hover: true });

})；

这就是我得到的

我的数据表的图像

Answer 1

我认为你这样做的方式不对，你基本上可以使用数据表功能来解决你的问题。你想从数据库中提取数据，并将数据绘制到带有自定义按钮的表中，不是吗？

好吧，这是我的做法

1.让我们制作你的表格，我更喜欢直接通过html 定义我的初始表格

<table id="datatable-custom" class="table">
<thead>
<th>ID</th>
<th>Atividade</th>
<th>Projeto</th>
<th>Aulas</>
<th>Orçamento</th>
<th>Data</th>
<th>Hora</th>
<th>Local</th>
<th>Opções</th>
</thead>
<tbody></tbody>
</table>

只保留空白

2.初始化表

const customDatatable = document.getElementById('datatable-custom')
customDatatable.DataTable({
ordering: false,
responsive: true,
autoWidth: false,
rowId: 'key',
ajax: {
url:'http://yourapi.com'
dataSrc: ''
},
columns: [
{data:'your_object_data_key'}
...,
{
data: function(row){
return `<button data-id="${row.your_key_id}">your custom button</button>`
}
}
columnDefs: [{
targets: 8,
data: null,
defaultContent: `<button class="btn btn-info"><i class="fas fa-edit"></i></button>`
}],

})

注意：

1. 如果您想将数据传递给每行数据的按钮，则可以使用data:函数(行(｛…｝，数据将通过${row.key}传递
2. 但是如果你不向按钮传递任何数据，你可以使用columnDefs并删除data:function(row({…}的部分；Opções"因为列索引是8。你可以自己定义这个按钮的位置
3. dataSrc正在定义将用于表的对象，如果您的对象数据是例如

来自数据库api 的示例响应数据

{
msg_status:true, 
msg_body:[{
key1:"data",
key2:"data"
}]
}

因此，您可以使用dataSrc:"msg_body">

让我知道这是否适合你