How to get parameter from another datatable column?

Question

My objective is to carry multiple parameters in same row but from different column. In my case, each row contain of 7 columns. but only 3 parameters that I need to pass to btnApprove1 function. This function will appoint to other API which require all that 3 parameters.

So how to carry service_id , project_id and staff_id into btnApprove function when clicked?

columns: [
    { data : "service_id", "className": "text-center" },
    { data : "project_id", "className": "text-center" },
    { data : "staff_id", "className": "text-center" },
    { data : "status", "className": "text-center",
        render: function(data){
            if (data == "1001") {
                return  "<span onclick='btnApprove(&quot;"+data+"&quot;)'</span>";
            }
            else {
                return data;
            }
        }
    },
    { data : "lorry", "className": "text-center" },
    { data : "car", "className": "text-center" },
    { data : "van", "className": "text-center" }
]

function btnApprove(service_id, project_id, staff_id){

    console.log(service_id, project_id, staff_id)

    var params = {
        "service_id": service_id,
        "project_id": project_id,
        "staff_id": staff_id
    };

    params = JSON.stringify(params);

    $.ajax ({
        ...
    });

}

Answer 1

According to the jQuery Datatable documentation for the column cell render() function, it takes four parameters, the third parameter is called row , and it's an array of values each representing the value of the column with the respective index. You can use this parameter to pass the right values to your btnApprove function.

In the code block below, I make use of destructuring on the row array to only get the first three values you need. Template literals also help make string HTML more readable.

render: function(data, type, [service_id, project_id, staff_id]) {
    if (data === '1001') {
        return `
            <span onclick="btnApprove('${service_id}', '${project_id}', '${staff_id}')">
                ${data}
            </span>
        `;
    }
    return data;
}

To make sure that your <span> click event has access to btnApprove when used as a string like you have, it needs to be declared globally, on thing you can do is to change the definition of the function from:

function btnApprove(service_id, project_id, staff_id) {

To:

btnApprove = function(service_id, project_id, staff_id) {

Answer 2

I just solve this issue by applying this.

{ data : "status", "className": "text-center",
    fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
        if (oData.status == "1001") {
            var stat = '<span class="badge badge-warning font-11">Approval</span><br/>';
            $(nTd).html("<span onclick='btnApprove(&quot;"+oData.service_id+"&quot;, &quot;"+oData.project_id+"&quot;, &quot;"+oData.staff_id+"&quot;)'>"+stat+"</span>");
        }
        else if (oData.status == "1000") {
            var stat2 = '<span class="badge badge-primary font-11">Registered</span>';
            $(nTd).html("<span onclick='btnNotApprove(&quot;"+oData.service_id+"&quot;, &quot;"+oData.project_id+"&quot;, &quot;"+oData.staff_id+"&quot;)'>"+stat2+"</span>");
        }
    }
},