So, i'm trying to create a custom button in my datatable table, but i'm not able to do it. I'll try to explain it.
Objective
I'm using DataTables to display a table with a lot of clientes, a basic table with just some basic information. In this table, on the same row of the cliente, i want to display 3 buttons. 1 for editing, 1 for view and 1 for exclude.
What i have
For the momment i have the data of the clients in a JSON file and i'm calling this JSON inside the DataTable Jquery plugin (code bellow). I have 2 ID's in my client JSON data, one is the Database ID (called ID) and the other is the system client ID (called CD). I'm using 2 ID's to prevent any errors in the DB so instead of have 2, 3, 6, 7, 8... I can make them all sequencial manually. Ok. Since the ID is not so important, i'm nothing using it to display on the table. I'm using the CD instead.
The problem
To edit/view or delete the client from the DataBase i need his ID, and to create the buttons i need a HTML code.
So my doubt is, how can i write this button to every single cliente and having his own ID inside the button? Here is a very simple code i use to view the clients data:
And this is a demo image i made in photshop https://i.sstatic.net/elGIM.png to show my final objective.
Code
Now, let me show you guys a little bit of code i have.
HTML (very very simple):
<table id="cfisico2" class="responsive" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>CPF</th>
<th>Cidade</th>
<th>Opções</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Jquery (calling the JSOn data and DataTables)
$('#cfisico2').dataTable({
responsive: true,
"bProcessing": true,
"bServerSide": false,
"aoColumns" : [
{ "mData": "id" },
{ "mData": "nm_cliente" },
{ "mData": "cpf" },
{ "mData": "cidade" },
{ "mData": "option" }
],
"ajax": {
"url": "data/c_fisico.json",
},
"dataType": "json"
});
And my JSON (with almost all the data i have of my clients):
{
"aaData": [
{
"cd":0,
"id":"C-0001",
"nm_cliente":"Nome do Cliente",
"cpf":"000.111.222-33",
"nm_pai":"Nome COmpleto Pai",
"nm_mae":"Nome Completo Mae",
"tel":"00-9966-6699",
"cidade":"cidade",
"estado":"estado"
},
{
"cd":1,
"id":"C-0002",
"nm_cliente":"Nome do Cliente",
"cpf":"000.111.222-33",
"nm_pai":"Nome COmpleto Pai",
"nm_mae":"Nome Completo Mae",
"tel":"00-9966-6699",
"cidade":"cidade",
"estado":"estado"
}
---etc---
]
}
I was trying to find a solution, but i didn't.. The closes i found was this one here: https://www.datatables.net/examples/ajax/null_data_source.html
But since the unique ID from the DataBase is not being displayed on the table, i can't use it to delete the data.
I hope i can find another solution to this problem, i spent the whole day trying to find it.
Ps.: Sorry for my english, i'm from Brasil.
Edit: I was trying to solve my problem, and i came into this 'solution' but still didn't made it work.
So what i tried to do was to write a new var with jquery with a data string, then i'll call this var in the datatables, instead of calling the json file. This way i'll be able to call what data i want by just manipulating the var (or multiple var).
So i made this little code here:
var url = "data/c_fisico.json";
dataSet = '['
$.getJSON(url, function (response){
$.each (response, function (index, table) {
dataSet += '{"' + table.id + '","' + table.nm_cliente + '","' + table.cpf + '"';
if ( table.cd <= 3 ) { //if used to avoid comma in the last string
dataSet += '},'
} else {
dataSet += '}';
}
}); //end each
dataSet += ']';
}); //end getJSON
With this code i'm able to write the string properly, but i can't make the datable load it.
Does anyone know how to do it? I already tried something like this:
$('#mytable').dataTable({
data: dataSet,
});
"cd":1 and "id":"C-0002"in your"aaData"and"mData": "id"in your"aoColumns". There should be some reference to your data so that it can be referred from your table to update or delete"cd:1"anywhere with your<td>for each data then it would be very difficult to manipulate your data with DB say edit or delete. So you need to have your unique identification appended with your table. Hope you got me. I can provide you with edit and delete buttons by rendering each edit and delete with table data and extradata-*attribute with it.. Hope you understand!