Estou usando o jQuery DataTables .
Desejo remover a barra de pesquisa e o rodapé (mostrando quantas linhas são visíveis) adicionadas à tabela por padrão. Eu só quero usar este plugin para classificar, basicamente. Isso pode ser feito?
Estou usando o jQuery DataTables .
Desejo remover a barra de pesquisa e o rodapé (mostrando quantas linhas são visíveis) adicionadas à tabela por padrão. Eu só quero usar este plugin para classificar, basicamente. Isso pode ser feito?
Respostas:
Para DataTables> = 1.10 , use:
$('table').dataTable({searching: false, paging: false, info: false});
Para DataTables <1.10 , use:
$('table').dataTable({bFilter: false, bInfo: false});
ou usando CSS puro:
.dataTables_filter, .dataTables_info { display: none; }
paging:false
e info:false
, não apenaspaging:false
Confira http://www.datatables.net/examples/basic_init/filter_only.html para obter uma lista dos recursos a serem exibidos / ocultados.
O que você deseja é definir "bFilter" e "bInfo" para false;
$(document).ready(function() {
$('#example').dataTable( {
"bPaginate": false,
"bFilter": false,
"bInfo": false
} );
} );
{paging: false, info: false}
Você também não pode desenhar o cabeçalho ou rodapé definindo sDom
: http://datatables.net/usage/options#sDom
'sDom': 't'
exibirá APENAS a tabela, sem cabeçalhos, rodapés ou qualquer coisa.
É discutido aqui: http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1
dom
propriedade com o valor de ltipr
ver datatables.net/reference/option/dom
Se você estiver usando um filtro personalizado, talvez queira ocultar a caixa de pesquisa, mas ainda deseje ativar a função de filtro, então bFilter: false
não é esse o caminho. Em dom: 'lrtp'
vez disso, use o padrão 'lfrtip'
. Documentação: https://datatables.net/reference/option/dom
var table = $("#datatable").DataTable({
"paging": false,
"ordering": false,
"searching": false
});
Uma maneira rápida e suja é descobrir a classe do rodapé e ocultá-la usando jQuery ou CSS:
$(".dataTables_info").hide();
se você estiver usando omeroller:
.dataTables_wrapper .fg-toolbar { display: none; }
Como disse @Scott Stafford, sDOM
é a propriedade mais apropriada para mostrar, ocultar ou realocar os elementos que compõem as DataTables. Eu acho que o sDOM
agora está desatualizado, com o patch atual esta propriedade está agora dom
.
Essa propriedade também permite definir alguma classe ou ID para um elemento, para que você possa estilizar com mais facilidade.
Verifique a documentação oficial aqui: https://datatables.net/reference/option/dom
Este exemplo mostraria apenas a tabela:
$('#myTable').DataTable({
"dom": 't'
});
<script>
$(document).ready(function() {
$('#nametable').DataTable({
"bPaginate": false,
"bFilter": false,
"bInfo": false
});
});
</script>
no seu construtor de dados
https://datatables.net/forums/discussion/20006/how-to-remove-cross-icon-in-search-box
Isso pode ser feito simplesmente alterando a configuração:
$('table').dataTable({
paging: false,
info: false
});
Mas para esconder o rodapé vazio; este pedaço de código faz o truque:
$('table').dataTable({
paging: false,
info: false,
//add these config to remove empty header
"bJQueryUI": true,
"sDom": 'lfrtip'
});
Apenas um lembrete de que você não pode inicializar DataTable
no mesmo <table>
elemento duas vezes.
Se você encontrar o mesmo problema, poderá definir searching
e paging
false ao inicializar o DataTable no seu HTML <table>
como este
$('#tbl').DataTable({
searching: false,
paging: false,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
Você pode escondê-los via css:
#example_info, #example_filter{display: none}
Você pode usar o atributo sDom. Código se parece com isso.
$(document).ready(function() {
$('#example').dataTable( {
'sDom': '"top"i'
} );
} );
Esconde a caixa de pesquisa e pager.
A partir do DataTables 1.10.5, agora é possível definir opções de inicialização usando os atributos data5 * em HTML5.
- documentação dataTables: dados HTML5 - * atributos - opções de tabela
Então você pode especificar data-searching="false" data-paging="false" data-info="false"
no table
. Por exemplo, esta tabela não permitirá pesquisar, aplicar paginação ou mostrar o bloco de informações:
<table id="example" class="display" width="100%" data-searching="false" data-paging="false" data-info="false">
<thead>
<tr>
<th>Name</th>
<th data-orderable="false">Avatar</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&d=identicon&r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&d=identicon&r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
...[ETC]...
</tbody>
</table>
Veja um exemplo de trabalho em https://jsfiddle.net/jhfrench/17v94f2s/ .
A vantagem dessa abordagem é que ela permite que você tenha uma chamada de dataTables padrão (ou seja, $('table.apply_dataTables').DataTable()
) enquanto pode configurar as opções de dataTables tabela por tabela.
Eu fiz isso atribuindo ao rodapé um id e, em seguida, estilizando usando 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>
estilizando usando css:
#FooterHidden{
display: none;
}
Como mencionado acima, as maneiras não estão funcionando para mim.
Se você deseja apenas ocultar o formulário de pesquisa, por exemplo, porque possui filtros de entrada de coluna ou pode ser porque já possui um formulário de pesquisa CMS capaz de retornar resultados da tabela, tudo o que você precisa fazer é inspecionar o formulário e obter seu ID - (no momento em que escrevemos isso, parece que sim [tableid]-table_filter.dataTables_filter
). Em seguida, basta [tableid]-table_filter.dataTables_filter{display:none;}
reter todos os outros recursos das tabelas de dados.
sDom
como descrito aqui - stackoverflow.com/a/53885264/5729813