Datatables sDom challenge aggiungi un nuovo elemento in basso a sinistra della tabella

Question

Desidero aggiungere un pulsante "Aggiorna" alle mie tabelle nella parte inferiore della tabella. Ma ho appena iniziato a usare i datatables ed è un po 'confuso come la parte "sDom" dove dice che posso farlo attraverso questo mezzo, ma la descrizione è vaga al meglio.

"sDom": '<"top"i>rt<"bottom"flp><"clear">' 

è l'esempio datatables.net, ma non so come fare testa o croce di questo e tutto quello che voglio fare è una cosa semplice.

Oppure c'è un esterno di "sDom" che sarebbe più adatto per quello che voglio fare?

Answer 1

Ecco un esempio live di sDom modificato.

http://live.datatables.net/onaqul/edit#javascript,html,live

Qui stiamo iniettando un div chiamato <div id="refresh"></div> con lo structrue <"#refresh">.

$('#example').dataTable({ 
     "sDom": '<"top"i>rt<"bottom"<"#refresh">flp><"clear">' 
     }); 

Se ispezionare il DOM generato nell'esempio, è possibile vedere <div id="refresh"></div> preso inserito all'interno di <div class="bottom"></div>.

Penso che molto dipenda da (1) come la tabella specifica ha i suoi elementi di piè di pagina, (2) dove si decide di iniettare il proprio elemento specifico usando sDom e (3) come si modellano gli elementi con il tuo CSS.

In alternativa, è possibile creare un pulsante creato all'esterno dell'ambiente dei datatables, ma utilizzare jquery per aggiungere o anteporre il proprio pulsante a uno dei datatables degli elementi dom creati.

Spero che questo sia un utile punto di partenza.

Answer 2

Sono d'accordo con voi sul fatto che la proprietà DataTables 'sDom' sia confusa. Personalmente ho appena impostato sDom uguale a 't', che crea solo la tabella, e aggiungo qualsiasi pulsante o cosa hai al di fuori del codice DataTables usando jQuery o qualche altro metodo. Non è una buona risposta, ma è quello che farei se fossi nella tua situazione e volessi fare qualcosa di semplice come aggiungere un pulsante.