jquery - paginacion - quitar ordenamiento datatables

¿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 agregan a la tabla de forma predeterminada. Solo quiero usar este plugin para ordenar, básicamente. Se puede hacer esto?

Answer 1

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

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

Answer 2

Creo que la forma más sencilla es:

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

Puede editar solo la tabla que tiene que modificar, sin cambiar CSS común o JS.

Answer 3

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; 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 4

Lo he hecho asignando un pie de página a un ID y luego a un estilo 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 estilizando usando css:

#FooterHidden{
   display: none;
}

Como se mencionó anteriormente, las formas no están funcionando para mí.

Answer 5

Para DataTables> = 1.10 , use:

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

Para tablas de datos <1.10 , use:

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

o usando CSS puro:

.dataTables_filter, .dataTables_info { display: none; }

Answer 6

Podrías esconderlos vía css:

#example_info, #example_filter{display: none}

Answer 7

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

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

Oculta el cuadro de búsqueda y buscapersonas.

Answer 8

Según lo dicho por @Scott Stafford sDOM es la propiedad más apropiada para mostrar, ocultar o reubicar los elementos que componen los DataTables. Creo que el sDOM ahora está desactualizado, con el parche real esta propiedad ahora es dom .

Esta propiedad también permite establecer alguna clase o id en un elemento, para que puedas un estilo más fácil.

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

Este ejemplo solo muestra la tabla:

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

Answer 9

Si está utilizando el controlador de vídeo:

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

Answer 10

Si está utilizando un filtro personalizado, es posible que desee ocultar el cuadro de búsqueda pero que aún desee habilitar la función de filtro, por lo que bFilter: false no es la forma. Use dom: ''lrtp'' lugar, el valor predeterminado es ''lfrtip'' . Documentación: datatables.net/reference/option/dom

Answer 11

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

''sDom'': ''t'' 

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

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

Answer 12

Una forma rápida y sucia es averiguar la clase del pie de página y ocultarla utilizando jQuery o CSS:

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

Answer 13

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

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

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

Answer 14

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

Si encuentra el mismo problema, puede configurar la searching y la paging falsas al inicializar DataTable en su <table> HTML como esto.

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

Answer 15

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

en su constructor de datos

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

Answer 16

hello friends you can add simply searching: false in your js





$(''#companies_grid'').DataTable({
        responsive: true,
        searching: false,
        iDisplayLength: 25,
        "ajax": base_url + "companies/company_table",
        "columns": [{
                "data": "SRNO"
            },
            {
                "data": "CompanyName"
            },
            {
                "data": "Country"
            },
            {
                "data": "CustomDomain"
            },
            {
                "data": "Email"
            },
            {
                "data": "Edit"
            }
        ]
    });

Answer 17

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