In a datatable how to pass a data value to a function here i am using two variables (newId , orderId ) and both are showing value in console but when i pass the value to a button on click function(renderViewDetails) it is saying variable(newId or orderId) it is undefined so what should i do to pass the value to a function on button click?
{
data: null,
orderable: false,
className: 'text-center',
render: function (data, type, row, ) {
var newId = data.id;
console.log(221, newId);
let orderId = `${data.id}`;
console.log(223, orderId);
let selDropdown = `<div class= flex-button> <div>
<a href="" id="" class="" data-toggle="modal" data-target="#view-details-modal">
<button id="btnViewConcepts" class="btn-link" type=""button" onclick="renderViewDetails(orderId)">View Details</button>
</a>
</div> <div id="setOption">`
}
Although you are doing the right thing by using template literal (backtick) for your HTML string, when you pass your variable you are passing a string of the variable name instead of its value. Instead, enclose the variable with curly braces with a $ sign in front.
let selDropdown = `<div class= flex-button> <div>
<a href="" id="" class="" data-toggle="modal" data-target="#view-details-modal">
<button id="btnViewConcepts" class="btn-link" type=""button" onclick="renderViewDetails(${orderId})">View Details</button>
</a>
</div> <div id="setOption">`
let selDropdown = `<div class= flex-button> <div>
<a href="" id="" class="" data-toggle="modal" data-target="#view-details-modal">
<button id="btnViewConcepts" class="btn-link" type=""button" onclick=${renderViewDetails(orderId)}>View Details</button>
</a>
</div> <div id="setOption">`