0

Tengo una tabla la cual la adapto a DataTable, en esto tengo dos problemas con los scroll debido a que la tabla de por sí tiene un tamaño, entonces, si tiene pocos datos no necesita un scrollY, al momento de definir el DataTable defino de una vez el scrollY, pero sí son pocos datos, no hace el scroll, esto me daña un poco el diseño, no es muy notable, pero está. Lo mismo ocurre en el ancho, solo que aquí sí es mucho más notable, dada la situación, lo que quiero es que si la tabla es menor a cierto ancho o mayor, ponga el scrollX y lo mismo con el scrollY, sí hay una forma, por favor, háganmela saber.

Dejo el código donde llamo el DataTable con JQuery

function tableDT(){
        tableData = $('#table').DataTable( {
            //scrollY: "400px",
            //scrollX: "740px",
            scrollCollapse: true,
            paging: false,
            columnDefs:[{
                targets: "_all",
                sortable: false
            }],
            rowReorder: {
                selector: 'td:nth-child(2)'
            },
            responsive: true
        });
    }

Así se ve sí activo las propiedades scrollX y scrollY tabla muestra

Demo en JSFiddle

2 respuestas 2

1

Te dejo las referencias del sitio oficial donde explican como definir un scrollX y scrollY: Scrolling DataTable y Scroll - vertical, dynamic height .

Básicamente lo que debes hacer es definir un alto o ancho mínimo para iniciar el scroll, en la segunda referencia se puede ver que se hace uso CSS3 para dar el ancho a partir de vh que sería el alto del viewport actual (espacio visible).

Tu código quedaría así, solo con scroll vertical, el horizontal lo debe poner la propiedad responsive:

function tableDT(){
        tableData = $('#table').DataTable( {
            scrollY: "50vh",
            //scrollX: "740px",
            //scrollCollapse: true,
            paging: false,
            columnDefs:[{
                targets: "_all",
                sortable: false
            }],
            rowReorder: {
                selector: 'td:nth-child(2)'
            },
            responsive: true
        });
    }
12
  • Voy a probar, pero te comento que el horizontal no lo pone
    – DaxTter77
    Commented el 16 sept. 2019 a las 15:06
  • Bueno, ahora sí lo pone, pero se ve mal, no hay forma de que se agregue después?
    – DaxTter77
    Commented el 16 sept. 2019 a las 15:09
  • También puedes habilitar el scrollX con vh, haz la prueba con 50vh también. Commented el 16 sept. 2019 a las 15:11
  • Es que lo que digo en la pregunta, se daña el diseño, se desacomodan las columnas y eso, entonces por eso lo pensé en agregarle esa propieda ya después de creado
    – DaxTter77
    Commented el 16 sept. 2019 a las 15:13
  • 1
    El problema es que los datos se llenan desde la base de datos, pero ya miro con datos improvisados
    – DaxTter77
    Commented el 16 sept. 2019 a las 15:34
0

Lo primero que se me ocurre es que si tu dataTable tiene que cargar 4 registros y tu le permites mostrar los 4 registros, entonces no necesita hacer ningun tipo de scroll. De forma que yo lo primero que probaria es a limitar el numero de registros que puede mostrar en cada pagina. Creo que dataTable tiene muchas versiones desde que emprecé a utilizarlo. En los dataTables que yo tengo creados utilizo...

"iDisplayLength": 3,

(Pero es posible que este obsoleto en versiones posteriores.)

Tambien limitaria la altura del dataTable.

"bAutoHeight": false,

Y le indicaria cual es la altura del área de scroll

"scrollY": "460px",
"scrollCollapse": true,   

Prueba a ver si esto te solventa el problema.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.