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

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 complemento para ordenar, básicamente. Se puede hacer esto?

Para DataTables> = 1.10 , use:

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

Para DataTables <1.10 , use:

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

o usando CSS puro:

.dataTables_filter, .dataTables_info { display: none; }

Consulte 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
                 } );
} );

Tampoco puede dibujar el encabezado o pie de página configurando sDom: http://datatables.net/usage/options#sDom

'sDom': 't' 

mostrará SOLAMENTE la tabla, sin encabezados ni pies de página ni nada.

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

Si está utilizando un filtro personalizado, es posible que desee ocultar el cuadro de búsqueda, pero aún así desea habilitar la función de filtro, por bFilter: falselo que no es el camino. Usar en su dom: 'lrtp'lugar, por defecto es 'lfrtip'. Documentación: https://datatables.net/reference/option/dom

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

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

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

si está usando themeroller:

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

Como dijo @Scott Stafford sDOMes la propiedad más apropiada para mostrar, ocultar o reubicar los elementos que componen las tablas de datos. Creo que sDOMahora está desactualizado, con el parche real de esta propiedad ahora dom.

Esta propiedad también permite establecer alguna clase o id a un elemento, para que puedas estilizar más fácilmente.

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

Este ejemplo solo mostraría la tabla:

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

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

en su constructor de tabla de datos

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

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

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

Esto se puede hacer simplemente cambiando la configuración:

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

Pero para ocultar el pie de página vacío; este código hace el truco:

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

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

});

Solo un recordatorio que no puede inicializar DataTableen el mismo <table>elemento dos veces.

Si encuentra el mismo problema, puede establecer searchingy pagingfalso mientras inicializa DataTable en su HTML de <table>esta manera

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

Podrías ocultarlos a través de css:

#example_info, #example_filter{display: none}

Puede usar el atributo sDom. El código se parece a esto.

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

Oculta el cuadro de búsqueda y buscapersonas.

A partir de DataTables 1.10.5, ahora es posible definir opciones de inicialización utilizando atributos HTML5 data- *.

- documentación de dataTables: atributos HTML5 data- * - opciones de tabla

Entonces puede especificar data-searching="false" data-paging="false" data-info="false"en el table. Por ejemplo, esta tabla no permitirá buscar, aplicar paginación o mostrar el bloque de información:

<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&amp;d=identicon&amp;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&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        ...[ETC]...
    </tbody>
</table>

Vea un ejemplo de trabajo en https://jsfiddle.net/jhfrench/17v94f2s/ .

La ventaja de este enfoque es que le permite tener una llamada estándar de tablas de datos (es decir, $('table.apply_dataTables').DataTable()) mientras puede configurar las opciones de tablas de datos tabla por tabla.

He hecho esto asignando una identificación al pie de página y luego peinando 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>

luego peinar usando css:

#FooterHidden{
   display: none;
}

Como se mencionó anteriormente, las formas no funcionan para mí.

Creo que la forma más simple es:

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

Puede editar solo la tabla que tiene que modificar, sin cambiar CSS o JS comunes.

Si solo desea ocultar el formulario de búsqueda, por ejemplo, porque tiene filtros de entrada de columna o puede ser porque ya tiene un formulario de búsqueda CMS capaz de devolver resultados de la tabla, entonces todo lo que tiene que hacer es inspeccionar el formulario y obtener su id. (al momento de escribir esto, se ve como tal [tableid]-table_filter.dataTables_filter). Luego, simplemente [tableid]-table_filter.dataTables_filter{display:none;}conserve todas las demás características de las tablas de datos.