5

Intento centrar n cantidad de columnas en una tabla que tiene DataTables recibiendo el parámetro dinámicamente pero no funciona.

He probado con el siguiente código, pero necesito que el valor sea dinámico, y que las columnas se centren desde la última hasta la primera según el número que mande:

function makerDatatable(number){
   $('#myTable').dataTable({
      "columnDefs": [
        {"className": "text-center", "targets": number}
      ]
   }
}

Solo se centra la columna con el número específico que recibe.

0

4 respuestas 4

4

La documentación de DataTables no es tan clara y por lo general se encuentra desactualizada, hace poco tuve el mismo requerimiento y el proceso fue el siguiente:

function doDataTable(tableId, rows, colsToCenter=2) {
    colsToBeCentered = [];
    for(i=1; i <= colsToCenter; i++){ //Hacemos un contador sobre el número recibido
        colsToBeCentered.push($(tableId + " th").length - i); //Por cada número tomamos la columna correspondiente, contando desde el final
    }
    $(tableId).DataTable({
        data: rows,
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        pageLength: 25,
        columnDefs: [{ //Centro el contenido de las n últimas columnas
            className: "text-center", "targets": colsToBeCentered
        }],
        hideEmptyCols: true,
        destroy: true
    });
}

Por defecto la función va a centrar las últimas dos columnas si no se recibe ingún parámetro, en caso contrario centra la cantidad indicada.

Ojalá sea lo que buscas.

0

No te compliques. Los puedes resolver solo con css.

#myTable tbody td:eq(0) {
    text-align: left;
}
#myTable tbody td {
    text-align: center;
}

Una regla de css bien planteada no rompera tu tabla.

1
  • 1
    El problema es centrar solo algunas columnas específicas y más cuando quizá hay tablas que tienen más columnas que otras. Commented el 31 ago. 2019 a las 16:35
0
$('#table').DataTable( {
            "ajax": "archivo.php",
            "order": [],
            "language": {
                "lengthMenu": "Mostrar _MENU_ registros",
                "zeroRecords": "No hay datos - lo siento",
                "info": "Mostrando _PAGE_ de _PAGES_",
                "infoEmpty": "Sin datos",
                "infoFiltered": "(Filtrando de un total de _MAX_ registros)",
                "search": "Buscar",
                "paginate": {
                    "previous": "Anterior",
                    "next": "Siguiente"
                }
            },
            "columns": [
                {data: 'fecha', name: 'fecha', width: '15%'},
                {data: 'rut', name: 'rut', width: '10%'},
                {data: 'nombreafiliado', name: 'nombreafiliado', width: '25%'},
                {data: 'causabloqueo', name: 'causabloqueo', width: '7%'},
                {data: 'desbloqueable', name: 'desbloqueable', width: '3%', className: "text-center"},
                {data: 'observacion', name: 'observacion', width: '30%'}
            ]
        } );

esto hace la magia (className: "text-center")

3
  • 1
    ¿Qué aprendí aquí? Nada. No dices cual es el problema ni porque está es la solución. Corregir sin educar es repetir el mismo error una y otra vez.
    – Candid Moe
    Commented el 29 ene. 2021 a las 6:25
  • explicate un poco
    – Srsole
    Commented el 29 ene. 2021 a las 7:08
  • Añade enunciados para que otros usuarios con el mismo problema puedan guiarse y poder comprender mejor tu respuesta, de lo contrario, esta puede dejar de ser válida
    – Rodrigo
    Commented el 29 ene. 2021 a las 11:23
0

Agrega esto a tu archivo CSS

tbody td {
text-align: center;}
2
  • Pulsa en editar y describe cómo este código responde a la pregunta. Lee Cómo responder y haz el recorrido de bienvenida para conocer el funcionamiento del sitio.
    – padaleiana
    Commented el 13 jun. a las 18:55
  • ¡Bienvenido a Stack Overflow en español! Te invito a hacer el recorrido de bienvenida. Por lo general las respuestas que tienen solo código son consideradas de baja calidad, pues carecen de una explicación de cómo ese código resuelve el problema planteado por la pregunta. Para más información lee Cómo responder.
    – jachguate
    Commented el 14 jun. a las 3:02

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.