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>';
}
Vous devez vous connecter pour publier un commentaire.
Utilisation
aoColumnDefs
etmRender
. Par exemple:Cela rendrait un lien en utilisant les données passées pour la 4ème colonne si je me souviens bien. Il a fait un petit moment que je l'utilise et j'ai juste attrapé extrait d'un vieux projet.
MODIFIER
Il a été un moment depuis que j'utilise les tables de données, les choses ont changé l'exemple ci-dessus ne peut fonctionner avec une version plus ancienne de tables de données. Voir cette démo pour un bon exemple de travail.
columnDefs
etrender
devrait faire l'affaire.De la démo:
row
tableau:row[0]
par exemple.Au lien suivant:
https://datatables.net/reference/option/columns.data#
Si vous pouvez le vérifier exemple suivant:
il manipule la première colonne dépend du type et de valeur. vous pouvez cibler la deuxième colonne et de manipuler le contenu à l'aide des données de la fonction dans columnDefs paramètre.
Espère que cette aide.