How to pass data to a function in a datatable

Question

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">`
}

Answer 1

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">`

Answer 2

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">`