Mostrar la longitud de la página en la parte inferior de la tabla

Question

Todo,

Estoy usando Jquery Data Tables. Estoy utilizando el siguiente ejemplo:

DataTables with Pagination

Me preguntaba si hay una manera de mostrar "Mostrar 10 entradas" en la parte inferior en lugar de la parte superior. Se debe mostrar justo antes de "Mostrar 1 a 10 de 51 entradas" .. en la parte inferior de la tabla.

¿Cómo puedo hacer eso?

Gracias

Answer 1

La manera de hacerlo es cambiar el Sdom en los js, donde se define la tabla:

$('#TABLE_ID').dataTable({` 
    "sDom": 'Rfrtlip'`  
}); 

Además, debe cambiar el css que aparezca al lado del "Mostrando ... entradas ", porque de esta manera aparece arriba.

Esta es la explicación de las opciones Sdom:

se permiten las siguientes opciones:

• 'l' - Longitud cambiar
• 'f' - filtrado de entrada
• 't' - ¡La mesa!
• 'i' -Información
• 'p' - Paginación
• 'r' - procesamiento

Se permiten los siguientes constantes:

• 'H' - jQueryUI tema "cabecera "classes ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')
• 'F' - jQueryUI clases de tema" pie de página "('fg-toolbar ui-widget -cabezado ui-corner-bl ui-corner-br ui-hel per-clearfix ')

Se espera que la siguiente sintaxis:

• ' < 'y '>' - elementos div
• ' < "clase" y '>' - div con una clase
• '< "#id" y '>' - div con un id Ejemplos:
• ' < "envoltorio" Flipt>' 'ip>'

PD: Esto también podría ayudarle:

datatables sDom

add-datatables-length-at-the-bottom-of-the-table

Answer 2

tenido un problema similar (querían eliminar algunos controles innecesarios) y la única manera de tratar con él parece estar modificando la tabla sí mismo. Utilicé la devolución de llamada fnDrawCallback (http://datatables.net/usage/callbacks).

será algo como esto en su caso

$('#tableId').dataTable({ 
    "fnDrawCallback": function() { 
     $('#tableId_info').prepend($('#tableId_length')); 
    } 
}); 

Sólo echa el código generado en esa demo, es realmente muy simple (excepto que no tiene formato o muesca).

También puede usar nombres de clase en lugar de identificadores, si no tiene miedo de afectar otras tablas en la página. Están en el formulario dataTables_length.

Use css para un estilo adicional.

Answer 3

Este es un ejemplo. Esta documentación ayuda mucho: https://datatables.net/release-datatables/examples/basic_init/dom.html

Mi tabla de datos tiene el siguiente aspecto:

También he tenido que añadir en css esta línea:

.dataTables_length { 
    margin-top: 10px; 
    margin-left: 20px; 
} 

El código es:

$('.data_table').DataTable({ 
      "iDisplayLength": 20, 
      "aLengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]], 
      "pagingType": "simple_numbers", 
      "language": { 
       searchPlaceholder: "Search", 
       search: "", 

      }, 
      "dom": '<"top"f>rt<"bottom"ilp><"clear">' 
     });