I am currently working on a page that retrieves data from a backend and displays it in a Datatable. One of the columns in my table is an input field with a default value fetched from the backend, and another column contains buttons. How can I implement a function that allows me to access the Oid value of the corresponding row whenever a button in any row is clicked? It's important to note that if I edit the input field, I should be able to access the edited value instead of the default value fetched from the backend.
let page = 1;
var exchange = "all";
var search = "";
var urlPage = "http://127.0.0.1:8000/mw_api/?page=" + page + "&exchange=" + exchange + "&search=" + search;
function loadTable() {
urlPage = "http://127.0.0.1:8000/mw_api/?page=" + page + "&exchange=" + exchange + "&search=" + search;
$(document).ready(function() {
$('#mwdata').DataTable({
"processing": true,
"serverSide": true,
"pageLength": 15,
"ajax": {
"data": function(d) {
var info = $('#mwdata').DataTable().page.info();
page = info.page + 1;
search = d.search.value;
urlPage = "http://127.0.0.1:8000/mw_api/?page=" + page + "&exchange=" + exchange + "&search=" + search;
console.log(urlPage, page, 'SEARCH', search);
$('#mwdata').DataTable().ajax.url(urlPage);
page = info.page + 1;
console.log(page);
}
},
"columns": [{
"data": "MarketName"
},
{
"data": "CoinName"
},
{
"data": "MainMarket"
},
{
"data": "MarketType"
},
{
"data": "Exchange"
},
{
"data": "Bid"
},
{
"data": "Oid",
"render": function(data, type, row) {
return "<input type='text' class='form-control' value='" + data + "'>";
}
},
{
"data": null,
"defaultContent": "<button class='btn btn-primary'>Update</button>"
}
]
});
});
}
function setExchange() {
exchange = document.getElementById("exchanges").value;
// reload the table
$('#mwdata').DataTable().ajax.reload();
}
loadTable();<head>
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46242929323532342736067368756875">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d0ddddc6c1c6c0d3c2f2879c819c81">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.2/css/dataTables.dataTables.css">
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
</head>
<div class="container">
<table id="mwdata" class="display" style="width:100%">
<thead>
<tr>
<th>Market Name</th>
<th>Coin Name</th>
<th>Main Market</th>
<th>Market Type</th>
<th>Exchange</th>
<th>Bid Price</th>
<th>OID</th>
<th>Update</th>
</tr>
</thead>
</table>
</div>