Come posso rimuovere la barra di ricerca e il piè di pagina aggiunti dal plugin jQuery DataTables?

Question

Sto usando jQuery DataTables.

Desidero rimuovere la barra di ricerca e il piè di pagina (che mostra quante righe sono visibili) che viene aggiunto alla tabella per impostazione predefinita. Voglio solo usare questo plugin per l'ordinamento, in pratica. Può essere fatto?

Answer 1

Per DataTable> = 1,10, uso:

$('table').dataTable({searching: false, paging: false}); 

per DataTable < 1.10, uso:

$('table').dataTable({bFilter: false, bInfo: false}); 

o utilizzando CSS puro:

.dataTables_filter, .dataTables_info { display: none; } 

Answer 2

Un modo rapido e sporco è quello di scoprire la classe del piè di pagina e nasconderlo utilizzando jQuery o CSS:

$(".dataTables_info").hide(); 

Answer 3

Li poteva nascondere tramite CSS:

#example_info, #example_filter{display: none} 

Answer 4

se si utilizza themeroller:

.dataTables_wrapper .fg-toolbar { display: none; } 

Answer 5

Partenza http://www.datatables.net/examples/basic_init/filter_only.html per un elenco di funzionalità per mostra nascondi.

Quello che vuoi è impostare "bFiltro" e "bInfo" su falso;

$(document).ready(function() { 
    $('#example').dataTable({ 
     "bPaginate": false, 
     "bFilter": false, 
     "bInfo": false 
       }); 
}); 

Answer 6

Potete anche non ritirare l'intestazione o piè di pagina a tutti impostando sDom: http://datatables.net/usage/options#sDom

'sDom': 't' 

visualizzerà solo il tavolo, senza intestazioni o piè di pagina o altro.

E 'discusso alcuni qui: http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

Answer 7

ho fatto questo assegnando footer un id e poi lo styling usando i CSS:

<table border="1" class="dataTable" id="dataTable_${dtoItem.key}" > 
    <thead> 
     <tr> 
      <th></th> 

     </tr> 
    </thead> 
<tfoot> 
    <tr> 
      <th id="FooterHidden"></th> 
    </tr> 
</tfoot> 
<tbody> 

    <tr> 

       <td class="copyableField"></td> 

    </tr> 
</tbody> 
</table> 

poi lo styling usando i CSS:

#FooterHidden{ 
    display: none; 
} 

Come sopra i modi menzionati non funzionano per me.

Answer 8

È possibile utilizzare l'attributo sDom. Il codice sembra qualcosa del genere.

$(document).ready(function() { 
    $('#example').dataTable({ 
     'sDom': '"top"i' 
       }); 
}); 

nasconde ricerca e cercapersone scatola.

Answer 9

Qui è possibile aggiungere all'elemento sDom il codice, la barra di ricerca in alto è nascosta.

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

Answer 10

<script> 
$(document).ready(function() { 
    $('#nametable').DataTable({ 
     "bPaginate": false, 
     "bFilter": false, 
     "bInfo": false 
    }); 
}); 
</script> 

nel costruttore DataTable

https://datatables.net/forums/discussion/20006/how-to-remove-cross-icon-in-search-box

Answer 11

Come detto da @ Scott Stafford sDOM è la proprietà più Appropiato per mostrare, nascondere o spostare gli elementi che compongono le DataTable. Penso che lo sDOM non sia aggiornato, con la patch effettiva che questa proprietà è ora dom.

Questa proprietà consente di impostare qualche classe o id per un elemento, in modo da rendere più semplice l'aspetto.

Controllare la documentazione oficial qui: https://datatables.net/reference/option/dom

Questo esempio potrebbe mostrare solo la tabella:

$('#myTable').DataTable({ 
    "dom": 't' 
}); 

Answer 12

Se si utilizza filtro personalizzato, si potrebbe desiderare di nascondere casella di ricerca, ma ancora voglia di abilitare la funzione filtro, quindi bFilter: false non è la via. Utilizzare invece dom: 'lrtp', il valore predefinito è 'lfrtip'. Documentazione: https://datatables.net/reference/option/dom

Answer 13

Questo può essere fatto semplicemente cambiando la configurazione:

$('table').dataTable({ 
     paging: false, 
     info: false 
}); 

Ma per nascondere il piè di pagina vuota; questo pezzo di codice fa il trucco:

$('table').dataTable({ 
     paging: false, 
     info: false, 

     //add these config to remove empty header 
     "bJQueryUI": true, 
     "sDom": 'lfrtip' 

}); 

Answer 14

Penso che il modo più semplice è:

<th data-searchable="false">Column</th> 

È possibile modificare solo la tabella è necessario modificare, senza cambiare comune CSS o JS.

Answer 15

var table = $("#datatable").DataTable({ 
    "paging": false, 
    "ordering": false, 
    "searching": false 
}); 

Answer 16

Solo un promemoria non è possibile inizializzare DataTable sullo stesso <table> elemento due volte.

Se si verifica lo stesso problema quindi è possibile impostare searching e paging falso durante l'inizializzazione DataTable sul tuo HTML <table> come questo

$('#tbl').DataTable({ 
    searching: false, 
    paging: false, 
    dom: 'Bfrtip', 
    buttons: [ 
     'copy', 'csv', 'excel', 'pdf', 'print' 
    ] 
});