jquery datatables produit d'affichage du lien dans le tableau

Je suis à l'aide de jquery datatables pour afficher une grande quantité de données avec enfant de lignes et de colonnes de filtrage, etc.... Je suis d'importer la totalité de mes données via un json fichier txt. J'ai besoin d'être en mesure de relier les numéros de pièce(ligne parent) dans le tableau directement à la page produit correspondante.

EDIT: Basé sur Tims réponse ci-dessous, j'ai éditer ce post avec les nouvelles informations

Nouveau fichier txt, exemple:

{
"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"
  },

C'est là que je l'ai ajouté au fichier js:

 /* 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();
} );
} );

Voici mon code 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>

Maintenant, le tableau ne rend pas du tout et j'obtiens une erreur de la console dans le navigateur, il retourne une erreur de

Uncaught ReferenceError: PartNumber is not defined 

J'espère que cela aide à clarifier les choses.

Merci pour votre aide.

Mise à JOUR: correction

Il était assez facile en fait. J'ai reformaté la ligne enfant et de l'ajout d'un Produit lien de la Page à côté de l'image.

 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>';
}
InformationsquelleAutor jagsweb | 2014-05-09