¿Cómo puedo eliminar la barra de búsqueda y el pie de página agregados por el complemento jQuery DataTables?

Question

Estoy usando jQuery DataTables.

Quiero eliminar la barra de búsqueda y el pie de página (que muestra cuántas filas hay visibles) que se agrega a la tabla de forma predeterminada. Solo quiero usar este plugin para ordenar, básicamente. Se puede hacer esto?

Answer 1

Para DataTables> = 1,10, uso:

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

para DataTables < 1.10, uso:

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

o el uso puro CSS:

.dataTables_filter, .dataTables_info { display: none; } 

Answer 2

Una manera rápida y sucia es averiguar la clase del pie de página y ocultarlo usando jQuery o CSS:

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

Answer 3

Usted podría ocultarlos a través de CSS:

#example_info, #example_filter{display: none} 

Answer 4

si está utilizando ThemeRoller:

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

Answer 5

Salida http://www.datatables.net/examples/basic_init/filter_only.html para obtener una lista de características para mostrar ocultar.

Lo que desea es establecer "bFilter" y "bInfo" en falso;

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

Answer 6

Usted puede también no dibujar el encabezado o pie de página a todos, fijando sDom: http://datatables.net/usage/options#sDom

'sDom': 't' 

mostrará sólo la mesa, no hay encabezados o pies o cualquier cosa.

Se discute algunos aquí: http://www.datatables.net/forums/discussion/2722/how-to-hide-empty-header-and-footer/p1

Answer 7

he hecho esto mediante la asignación de pie de página un id y luego peinar el uso de 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> 

luego peinar el uso de CSS:

#FooterHidden{ 
    display: none; 
} 

Como arriba las formas mencionadas no funcionan para mí.

Answer 8

Puede usar el atributo sDom. El código se ve algo como esto.

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

İt oculta la búsqueda y la caja del buscapersonas.

Answer 9

Aquí puede agregar sDom elemento a su código, la barra de búsqueda superior está oculta.

$(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> 

en su constructor tabla de datos

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

Answer 11

Como se ha dicho por @ Scott Stafford sDOM es la propiedad más apropiated a mostrar, ocultar o la ubicación de los elementos que componen las tablas de datos. Creo que el sDOM ahora está desactualizado, con el parche actual esta propiedad ahora es dom.

Esta propiedad le permite establecer una clase o identificación a un elemento también, para que pueda ser más sencillo.

Consulte la documentación oficial aquí: https://datatables.net/reference/option/dom

Este ejemplo mostraría sólo la tabla:

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

Answer 12

Si está utilizando filtro personalizado, es posible que desee ocultar cuadro de búsqueda, pero todavía quiere permitir que el función de filtro, por lo que bFilter: false no es el camino. Use dom: 'lrtp' en su lugar, el valor predeterminado es 'lfrtip'. Documentación: https://datatables.net/reference/option/dom

Answer 13

Esto se puede hacer simplemente cambiando la configuración:

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

Pero para ocultar el pie de página vacía; esta pieza de código hace el truco:

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

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

}); 

Answer 14

Creo que la forma más sencilla es:

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

es posible editar la tabla tiene que modificar, sin cambios CSS común o JS.

Answer 15

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

Answer 16

Sólo un recordatorio de que no se puede inicializar DataTable en el mismo elemento <table> dos veces.

Si encuentra mismo problema entonces se puede establecer searching y paging falsa mientras se iniciaba la DataTable en su HTML <table> como esto

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