php - Datatable without action buttons (javascript)

I'm having problems putting some actions buttons in mdbootstrap datatable I'm following their example but without fetching data and i need to fetch data from my database The records are present but the buttons no and i need them to get the results i need This is my javascript code

$(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 });

});

And this is what i get

Image of my datatable

Solution:

i think you're doing this with wrong way, you basically can use datatable feature to solve your problem. you want to fetch data from database and draw the data to the table with custom button in it, isnt it?

alright here is how i do it

1.Lets make your table, i prefer to define my initial table directly by 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>

just leave blank

2.initialize the table

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>`
   }],
           
})

Note :

1. if you want to pass your data to the button for each row data, then the data: function(row){...} can be used for that, the data will be passed through the ${row.key},
2. but if you don't pass any data to the button you can use the columnDefs and delete the part of data: function(row){...}. the targets: 8 that i assume that you will put the button at the column "Op?�?�es" since the column index is 8. you can define yourself where this button will be put
3. The dataSrc is defining the object that will be used to the table, if your object data cantains ex.

Example response data from your database api

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

So you can use dataSrc: "msg_body"

Let me know if this works for you