How to render a particular column to have a link with it's data displayed and fetch row data

YoDavish

Hello,

I'm still new to Javascript, so any apologies if I missed anything. I have JSON data being passed to DataTables. Currently, I can click on a row to fetch all the data for that particular row. However, now I need to do almost the same thing but rather than click on the row, I'll need to render a specific column that still displays its data and have a link that will capture all the data for that particular row.

I've gotten the render to show "data" but I can't get it to show the data its suppose to show. For instance Case Number: "1234" should show "1234" but it shows "data". Then the link needs to be able to fetch that row's data.

Below is the current code I have:

// READY FUNCTION
$(document).ready(function() {
    var obj = $('#tempDataForm').serializeJSON();
    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;

        if ( $.fn.DataTable.isDataTable('#discrepancyQueue') ) {
            $('#discrepancyQueue').DataTable().destroy();
        }

        $('#discrepancyQueue').DataTable( {
            data: refreshedData,
                    ``` // Allows row to be clicked to capture rows data
            "fnDrawCallback": function( oSettings ) {
                $('#discrepancyQueue').on( 'click', 'tr', function () {
                    var table = $('#discrepancyQueue').DataTable();
                    // Gets the row values
                    var rawData = table.row( this ).data();
                    var data = (JSON.stringify(rawData));
                });
            },```
            columns: colNames,
            responsive: true,
            // Hides "Id" columns and makes it not searchable
            "columnDefs": [
                {
                    "targets":  [ 0 ],
                    "visible": false,
                    "searchable": false
                },
                ```{
                    "targets": [ 1 ],
                    "data": "Case Number",
                    "render": function ( data, type, row, meta ) {
                    return '<a href="'+data+'">data</a>';
                    }
                } ```
            ]
        });

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

Any help on this would be greatly appreciated.

colin

Hi @YoDavish ,

Yep, your line 40 looks wrong:

return '<a href="'+data+'">data</a>'

That is putting "data" as the HTML text. Try this instead:

return '<a href="'+data+'">' + data + '</a>'

Cheers,

Colin