Getting value from first cell of current row and printing it on the input of a form
Getting value from first cell of current row and printing it on the input of a form
Sareth
Posts: 6Questions: 2Answers: 0
Hello !
I'm struggling on something probably quite simple but I lack knowledge on how to do it yet
I have a table that I fill with the data from my own API. It looks like this.
{
"error": false,
"data": [
{
"IDC": 1,
"Nom": "Dupond",
"Prenom": "Jean",
"DateNaiss": "01/01/1980",
"Adresse": "1 Place de la République Marseille",
"DatePermis": "01/01/2000"
},
{
"IDC": 2,
"Nom": "Pignon",
"Prenom": "Francois",
"DateNaiss": "20/04/1996",
"Adresse": "2 Place de la République Marseille",
"DatePermis": "01/01/2017"
},
{
"IDC": 3,
"Nom": "Leblanc",
"Prenom": "Juste",
"DateNaiss": "01/01/1996",
"Adresse": "3 Place de la République Marseille",
"DatePermis": "01/01/2019"
}
],
"message": "Liste clients"
}
I would firstly like to add an edit button then in a second time maybe a delete button to the last column of my table.
My code looks like this, I need help for the retun at the bottom of the page I think.
<html>
<head>
<title> Application WEB </title>
<!-- All Datatable and Bootstrap dependencies, removed for visibility-->
</head>
<body>
<div class="container">
<h2> Liste client </h2>
</br></br>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>IDC</th>
<th>Nom</th>
<th>Prenom</th>
<th>DateNaiss</th>
<th>Adresse</th>
<th>DatePermis</th>
<th>Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th>IDC</th>
<th>Nom</th>
<th>Prenom</th>
<th>DateNaiss</th>
<th>Adresse</th>
<th>DatePermis</th>
<th>Actions</th>
</tr>
</tfoot>
</table>
</div>
<script>
$('#example').dataTable( {
"ajax": {
"url": "http://localhost:3000/client"
},
"columns": [
{ "data": "IDC" },
{ "data": "Nom" },
{ "data": "Prenom" },
{ "data": "DateNaiss" },
{ "data": "Adresse" },
{ "data": "DatePermis" },
{
data: null,
render: function ( data, type, row ) {
return '<form id="Edit-1" action="http://localhost:3001/Eclient" method="get"><input id="pIDC" name="pIDC" type="hidden" value="1"><input type="submit" class="btn btn-primary" value="Edit"></form>';
}
}
]
} );
</script>
</body>
</html>
I would like to change my "Edit-1" and the value of my input pIDC to something like "Edit-'+row.cell("IDC").data()'+" so it'll work with other rows than the first one. Basically get current row, get the data inside the IDC cell and print it in my form ID and my input value so I can send it to another page
Thanks you for helping newcomers !
This question has an accepted answers - jump to answer
Answers
Here is a thread with the same question:
https://datatables.net/forums/discussion/comment/157476/#Comment_157476
Kevin
Thanks you kthorngren I'm gonna check
So I understand the example but I don't think it's helping me that much, or I can't make it work yet at least. In both example the button is calling a function to print in the console, but I only want to modify the id of my form and the value of an input when the table load.
I saw that you got the value of the id of the row and you used it in your code, which is what I want to do basically. But the structure is so different that I can't make it work still
I tried something like that
I get the error id is undefined with the above code.
At some point I got to make it not break with row("IDC") but it returned me undefined each time, and I can't seem to replicate it.
Sorry if I'm a bit lost. I hope you're gonna be able to help me
Generally the Datatables API is not available in columns/render. What are you expecting
idto be in this line? If you want it to be theIDCobject then you can do something likevar tempIDC = data.IDC;.You have
..<input id="pIDC"..which is not valid. HTML expects unique IDs. Your code will insert the same ID for all rows. You can use themetaparameter of thecolumns.renderfunction, see the docs and the example. Or you can use thetempIDCvalue.Kevin
It was infact
data.IDC!!I think the
<input id="pIDC"is right in this case ? Each form got a different ID now, but the page receiving the submit need to get the value from pIDC that is submited. So they all need to have the same id, only the one inside the form where the button will be clicked will be sent.Or maybe I'm not understanding you, or missing something.
Thanks again, it's the second time you help me with datatables