jQuery Datatable Posizionamento DOM per pulsanti

Question

Ho appena aggiornato la versione di jQuery Datatable a 1.10. E poi ho provato a rimuovere il suo plugin in pensione come "Colvis" e "Tabletools" con l'estensione "Button". Tutto funziona bene qui.

Ma il problema per me è che non riuscivo a separare il pulsante "Colvis" dai pulsanti "Tabletool".

"sDom": "B<'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'p>B", 
    "buttons": [ 
     'copyHtml5', 
     'excelHtml5', 
     'csvHtml5',  
     { 
      extend: 'colvis', 
      postfixButtons: [ 'colvisRestore' ], 
      columns: '0,1,2,3,4,5,6' 
     } 
    ], 
    language: { 
     buttons: { 
      colvis: 'Change columns' 
     } 
    } 

Dove nella "sDom", la lettera "B" indica i pulsanti. Quindi sto ricevendo tutti e quattro i pulsanti (Copia, Excel, CSV e Colvis) in una singola riga. Ma ho bisogno del pulsante "Colvis" per essere separato da (Copia, Excel e CSV).

Quindi, c'è un modo per aggiungere un pulsante vicino alla casella di ricerca e un altro vicino all'impaginazione?

O

C'è qualche configurazione disponibile nel "Sdom" o il "tasto"?

Grazie!

Answer 1

È possibile aggiungere nuovi elementi ai domini DataTables utilizzando <'.class'> o <'#id'>. Esempio, inserire un nuovo <div id="colvis"> elemento a fianco della paginazione, <'#colvis'> prima p:

"sDom": "B<'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'<'#colvis'>p>" 

colvis pulsanti ha la classe .buttons-colvis, quindi vengono spostati in modo permanente al iniettato #colvis elemento da:

$('.buttons-colvis').detach().appendTo('#colvis') 

Questo è il modo rapido per spostare il pulsante colvis in un'altra posizione.

---

Per quanto riguarda @ suggerimento di GreeKatrina, sì - ma il metodo di posizionamento corretto è:

var colvis = new $.fn.dataTable.Buttons(table, { 
    buttons: [ 
     { 
      extend: 'colvis', 
      ... 
     } 
    ] 
}) 
colvis.container().appendTo('#colvis') 

se si dispone di un elemento #colvis naturalmente.

---

La mia raccomandazione: Oltre alla soluzione di cui sopra hardcoded, in cui è bersaglio i pulsanti colvis specificamente, si potrebbe DataTable di patch scimmia pulsanti in modo ogni pulsante esteso può avere un'opzione container.Dopo l'inizializzazione, il pulsante viene spostato specificato container:

var org_buildButton = $.fn.DataTable.Buttons.prototype._buildButton; 
$.fn.DataTable.Buttons.prototype._buildButton = function(config, collectionButton) { 
    var button = org_buildButton.apply(this, arguments); 
    $(document).one('init.dt', function(e, settings, json) { 
     if (config.container && $(config.container).length) { 
      $(button.inserter[0]).detach().appendTo(config.container) 
     } 
    })  
    return button; 
} 

utilizzare l'opzione container:

{ 
    extend: 'colvis', 
    postfixButtons: [ 'colvisRestore' ], 
    container : '#colvis', //<--- 
    columns: '0,1,2,3,4,5' 
} 

demo ->http://jsfiddle.net/v4bLv83h/

Come mostra l'esempio dimostra, è ora possibile specificare un contenitore alternativo per ogni pulsante. Si noti che container può essere qualsiasi elemento, non deve essere un elemento iniettato da dom. Si noti inoltre (come si può notare nel violino) che è necessario eseguire alcuni stili se si desidera che gli elementi iniettati scorrano correttamente insieme agli elementi di controllo nativi, come il blocco di impaginazione.

Answer 2

Non sono un esperto con la libreria di tabelle di dati, ma il documentation dice che è possibile avere più raccolte di pulsanti e inserirli separatamente. Ha anche un esempio per multiple button groups che è possibile utilizzare invece di inserire "B" più volte nell'opzione dom, che non penso sia valida.

Combinando gli esempi la documentazione e il vostro esempio (non testato):

var table = $('#myTable').DataTable({ 
    dom: "B<'#colvis row'><'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'p>", 
    buttons: [ 
     'copyHtml5', 
     'excelHtml5', 
     'csvHtml5' 
    ] 
}); 

new $.fn.dataTable.Buttons(table, { 
    buttons: [ 
     { 
      extend: 'colvis', 
      // Shorter than using the language.buttons.colvis option 
      text: 'Change columns', 
      postfixButtons: [ 'colvisRestore' ], 
      columns: '0,1,2,3,4,5,6' 
     } 
    ] 
}); 

// To append it at the bottom of the table 
// 3 since the colvis button is at the 3rd index in the buttons array 
table.buttons(3, null).container().appendTo(
    table.table().container() 
); 

// To append it on the first row after the buttons, in the #colvis row 
table.buttons(3, null).container().appendTo(
    $('#colvis'), table.table().container() 
); 

Se non funziona fatemelo sapere e io aggiornare la mia risposta.