jquery datatables display product link in table

Question

I am using jquery datatables to display a large amount of data with child rows and individual column filtering etc.... I am importing all of my data via a json txt file. I need to be able to link the part numbers(parent row) in the table directly to the corresponding product page.

EDIT: Based on Tims response below, I've edit this post with the new information

New txt file sample:

{
"data": [
  {
    "PartNumber": "201008", 
    "PartUrl": "99-05-sonata-optima-santafe-catalytic-converter.aspx",
    "LongDesc": "Direct-Fit Converter",
    "Year": "2002",
    "Make": "HYUNDAI",
    "Model": "SANTA FE",
    "Engine": "2.4L/2351cc L4",
    "Thumb": "images/products/thumb/201008.jpg",
    "Location": "Front"
  },
  {
    "PartNumber": "201008", 
    "PartUrl": "99-05-sonata-optima-santafe-catalytic-converter.aspx",
    "LongDesc": "Direct-Fit Converter",
    "Year": "2003",
    "Make": "HYUNDAI",
    "Model": "SANTA FE",
    "Engine": "2.4L/2351cc L4",
    "Thumb": "images/products/thumb/201008.jpg",
    "Location": "Front"
  },

Here is where I added it to the js file:

 /* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;padding-right:50px;">'+
    '<tr>'+
        '<td>Category:</td>'+
        '<td>'+d.LongDesc+'</td>'+
        '<td rowspan="3"><img src="' + d.Thumb + '"/></td>'+
    '</tr>'+
    '<tr>'+
        '<td>Location:</td>'+
        '<td>'+d.Location+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td>Notes:</td>'+
        '<td>'+d.Notes+'</td>'+
    '</tr>'+
'</table>';
}

$(document).ready(function() {
 // Setup - add a text input to each footer cell
$('#example thead th').each( function () {
    var title = $('#example thead th').eq( $(this).index() ).text();
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );

var table = $('#example').DataTable( {
    "ajax": "../data/cat-datab.txt",
    "columns": [
        {
            "class":          'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "Year" },
        { "data": "Make" },
        { "data": "Model" },
        { "data": "Engine" },
        { "data": "PartNumber" }
    ],
"columnDefs": [ {
"targets": 5,
"data": "PartUrl",
"render": function ( data, type, full ) {
  return '<a href="'+data+'">'+PartNumber+'</a>';
}
} ],
    "order": [[1,'asc'], [2,'asc'], [3,'asc'], [4,'asc'], [5,'asc']],
    "bSort": false,
    "bPaginate": true,
    "bLengthChange": true,
    "bInfo": false,
    "bAutoWidth": true,
    "iCookieDuration": 60*60*24, // 1 day 
} );

// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).parents('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );

   // Apply the filter
$("#example thead input").on( 'keyup change', function () {
    table
        .column( $(this).parent().index()+':visible' )
        .search( this.value )
        .draw();
} );


} );

Here is my HTML:

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Year</th>
            <th>Make</th>
            <th>Model</th>
            <th>Engine</th>
            <th>Part #</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tfoot>
</table>

Now the table will not render at all and I get a console error in the browser, it returns an error of

Uncaught ReferenceError: PartNumber is not defined 

I hope this helps clear it up.

Thanks for your assistance.

UPDATE: Fixed

It was pretty easy actually. I reformatted the child row and added a View Product Page link next to the picture.

 function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;padding-right:50px;">'+
    '<tr>'+
        '<td>'+d.PartNumber+'</td>'+
        '<td><a href="' + d.PartUrl + '" target="_blank">View Product Page</td>'+    
        '<td rowspan="4"><img src="' + d.Thumb + '"/></td>'+
    '</tr>'+
    '<tr>'+
        '<td>Category:</td>'+
        '<td>'+d.LongDesc+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td>Location:</td>'+
        '<td>'+d.Location+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td>Notes:</td>'+
        '<td>'+d.Notes+'</td>'+
    '</tr>'+
'</table>';
}

Answer 1

Use aoColumnDefs and mRender. For example:

"aoColumnDefs": [
            {
                "mRender": function (data, type, row) {
                    var $href = $("<a></a>").prop("href", data);
                    return $("<div/>").append($input).html();
                },
                "aTargets": [4]
            }

This would render a link using the data passed in for the 4th column if memory serves me right. It has been a little while since I used this and I just grabbed snippet from an old project.

EDIT
It has been a while since I use datatables, things have changed - the above example may only work with an older version of datatables. See this demo for a good working example. columnDefs and render should do the trick.

From the demo:

$(document).ready(function() {
    $('#example').dataTable( {
        "columnDefs": [
            {
                // The `data` parameter refers to the data for the cell (defined by the
                // `data` option, which defaults to the column being worked with, in
                // this case `data: 0`.
                "render": function ( data, type, row ) {
                    return data +' ('+ row[3]+')';
                },
                "targets": 0
            },
            { "visible": false,  "targets": [ 3 ] }
        ]
    } );
} );