Insertion d'attributs de données personnalisés dans les DataTables JQuery
Problème:
- j'utilise JQuery DataTables v1.10 pour un projet lié au travail.
- le projet exige qu'un Datatable soit défini et créé avec les données JSON parsées passées en tant que les valeurs de la table
une fois que le datatable a été créé, chaque cellule dans chaque colonne devrait avoir un événement de clic qui ouvre un pop in et passer dans une liste de noms dans JSON, reçu d'un endpoint. Le point de terminaison change en fonction de la cellule de tableau est cliquer.
je pense que, sur instanciation dattable, j'ai besoin de stocker une sorte d'information unique dans un attribut de données HTML5 défini sur chaque élément de la cellule de la table. J'espérais déclarer un attribut de données personnalisé (ex: data-endpoint = "endpoint id") mais je ne suis pas sûr que ce soit possible si les lignes de table sont générées dynamiquement via des DataTables.
parce que je ne sais pas/ne comprends pas quelles sont mes options, j'aimerais décrire ce que je idéalement je voudrais faire:
- Instancier un datatable et la passer à l'analyse des données JSON.
- sur l'instanciation de la table, définissez un attribut de données personnalisé sur chaque élément de la cellule de la table.
- accédez à la cellule de la table event click, passez-lui les informations stockées dans l'attribut correct data -, afin d'obtenir le point final correct.
- créer un popin qui affichera les résultats reçus du paramètre.
La partie que je ne comprends pas est de savoir comment créer un attribut data-sur l'élément cellule de tableau. Est-ce possible ou dois-je penser à une autre approche. Toute aide est vivement appréciée!
2 réponses
Vous pouvez essayer avec le createdRow rappel sur l'instanciation. Exemple:
$table.dataTable({
"destroy": true, // To replace existing data
"data": jsonData,
"columns": columns,
// Per-row function to iterate cells
"createdRow": function (row, data, rowIndex) {
// Per-cell function to do whatever needed with cells
$.each($('td', row), function (colIndex) {
// For example, adding data-* attributes to the cell
$(this).attr('data-foo', "bar");
});
}
});
je pense que cela peut vous aider à faire ce que vous avez besoin.
j'ai dû faire quelque chose comme ça. Je ne suis pas sûr du reste, mais j'ai utilisé l'option columnDefs pour définir les attributs.
....
"destroy": true, // To replace existing data
"data": jsonData,
"columns": columns,
// Sets the attribute
"columnDefs": [{
"targets":'_all',
"createdCell": function(td){
td.setAttribute('foo','bar');
}
}]
...
il utilise toujours l'option createdCell, mais il imite ce que j'ai trouvé dans leur documentation (https://datatables.net/reference/option/columns.createdCell).