Inserimento di dati attributi personalizzati in DataTable JQuery

Question

Problema:

• Sto usando JQuery DataTable v1.10 per un progetto legato al lavoro.
• Il progetto richiede un DataTable da definire e creata con dati analizzati JSON passati come i valori della tabella

• Una volta che il datatable è stato creato, ogni cellula in ogni colonna dovrebbe avere un evento click che si apre un pop entra e passa un elenco di nomi in JSON, ricevuti da un endpoint. L'endpoint cambia in base a quale cella della tabella viene fatto clic.

• Penso che, dopo l'istanziazione datatable, ho bisogno di memorizzare una sorta di informazione univoca in un attributo di dati HTML5 definito su ogni elemento di cella di tabella. Speravo di dichiarare un attributo dati personalizzato (es: data-endpoint = "endpoint id") ma non sono sicuro che sia possibile farlo se le righe della tabella vengono generate dinamicamente tramite DataTable.

Perché io non so/capire quali sono le mie opzioni, vorrei descrivere quello che idealmente vorrei fare:

• un'istanza di un DataTable e passarlo i dati analizzata JSON .
• Nell'istanza della tabella, impostare un attributo dati personalizzato su ogni elemento della cella della tabella.
• Accedere all'evento click della cella della tabella, passarlo le informazioni memorizzate nell'attributo dati corretto, per ottenere l'endpoint corretto.
• Creare un pop-in che visualizzi i risultati ricevuti dall'endpoint.

La parte che non capisco è come creare un attributo dati personalizzato sull'elemento cella della tabella. È possibile o devo pensare ad un altro approccio. Qualsiasi aiuto è profondamente apprezzato!

Answer 1

Si può provare con il callback createdRow in istanza. Esempio:

$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"); 
     }); 
    } 
}); 

Penso che questo possa aiutarti a fare ciò che ti serve.

Answer 2

Ho dovuto fare qualcosa del genere. Non sono sicuro del resto, ma ho usato l'opzione columnDefs per impostare gli attributi.

.... 
"destroy": true, // To replace existing data 
"data": jsonData, 
"columns": columns, 
// Sets the attribute 
"columnDefs": [{ 
    "targets":'_all', 
    "createdCell": function(td){ 
     td.setAttribute('foo','bar'); 
    } 
}] 
... 

utilizza ancora l'opzione createdCell, ma imita quello che ho trovato nella loro documentazione (https://datatables.net/reference/option/columns.createdCell).