How to make a JSON passed table clickable that would send a Ajax Request

YoDavish

I'm using Datatables to create a table by passing JSON to it which displays correctly. I've put in some code to hide the "Id" column. I'm still very new to Javascript, so I'm not sure how to make the rows clickable such that it would send an Ajax request (query function) with the "Id" and it's "intent". I've tried to use render within the "columnDefs" but couldn't get it to work. Any help on this would be great.

Below is my code currently:

// READY FUNCTION
$(document).ready(function() {
    var obj = $('#tempDataForm').serializeJSON();
        //function to perform Ajax call with parameters: intent, data, function, tries, and URL.
    query('discrepancyList',obj,refreshDiscrepancyTable,0,"queryDiscrepancy.php");
});


function refreshDiscrepancyTable(response) {
    if(response.result.state == 'success') {
        
        var refreshedData = response.result.data.results;
        var colNames = response.result.data.colNames;
        console.log(colNames);

        if ( $.fn.DataTable.isDataTable('#discrepancyQueue') ) {
            $('#discrepancyQueue').DataTable().destroy();
        }
        
        $('#discrepancyQueue').DataTable( {
            data: refreshedData,
            columns: colNames,
            responsive: true,
            "columnDefs": [
                {
                    "targets":  [ 0 ],
                    "visible": false,
                    "searchable": false
                },
                ```{
                    "targets": [ 1 ],
                    "data": "Case Number",
                    "render": query("discrepancyInfo",data,refreshDiscrepancyTable,0,"queryDiscrepancy.php") {
                      return '<a href="'+data+'">Case Number</a>';
                    }
                }```
            ]
        } );

        var myTable = $('#discrepancyQueue').DataTable();
        notify('success','Test!');
    } else {
        notify('warn','Error!');
    }
}