2

Tengo una serie de tablas generadas por esta api.

En su versión 1.10.13.

Los encabezados deben de estar centrados y los del cuerpo alineados a la derecha.

var Dataset = [];
var tituloMeses  = [];

tblTotales = $('#tblTotales').DataTable({
                "language": {
                    "sProcessing": "Procesando...",
                    "sLengthMenu": "Mostrar MENU registros",
                    "sZeroRecords": "No se encontraron resultados",
                    "sEmptyTable": "Ningún dato disponible en esta tabla",
                    "sInfo": "Mostrando registros del START al END de un total de TOTAL registros",
                    "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                    "sInfoFiltered": "(filtrado de un total de MAX registros)",
                    "sInfoPostFix": "",
                    "sSearch": "Buscar:",
                    "sUrl": "",
                    "sInfoThousands": ",",
                    "sLoadingRecords": "Cargando...",
                    "oPaginate": {
                        "sFirst": "Primero",
                        "sLast": "Último",
                        "sNext": "Siguiente",
                        "sPrevious": "Anterior"
                    },
                    "oAria": {
                        "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                    }
                },
                "ordering": false,
                "bFilter": false,
                destroy: true,
                "scrollX": true,
                scrollY: '30vh',
                scrollCollapse: true,
                data: Dataset,
                columns: [
                 { data: "ImporteCxC", "width": "85px" },
                 {
                     "title": tituloMeses[0], data: "Mes1Total", "width": "85px",
                     createdCell: function (td, cellData, rowData, row, col) {
                         var d = cellData;
                     },

                 },
                 {
                     "title": tituloMeses[1], data: "Mes2Total", "width": "85px",
                     createdCell: function (td, cellData, rowData, row, col) {
                         if (cellData == "0.00" && row == 1)
                             listColumns.push(col);
                     }
                 },
                 {
                     "title": tituloMeses[2], data: "Mes3Total", "width": "85px",
                     createdCell: function (td, cellData, rowData, row, col) {
                         if (cellData == "0.00" && row == 1)
                             listColumns.push(col);
                     }
                 },
                 {
                     "title": tituloMeses[3], data: "Mes4Total", "width": "85px",
                     createdCell: function (td, cellData, rowData, row, col) {
                         if (cellData == "0.00" && row == 1)
                             listColumns.push(col);
                     }
                 },
                 {
                     "title": tituloMeses[4], data: "Mes5Total", "width": "85px",
                     createdCell: function (td, cellData, rowData, row, col) {
                         if (cellData == "0.00" && row == 1)
                             listColumns.push(col);
                     }
                 },
                 {
                     "title": tituloMeses[5], data: "Mes6Total", "width": "85px",
                     createdCell: function (td, cellData, rowData, row, col) {
                         if (cellData == "0.00" && row == 1)
                             listColumns.push(col);
                     }
                 },
                 {
                     "title": tituloMeses[6], data: "Mes7Total", "width": "85px",
                     createdCell: function (td, cellData, rowData, row, col) {
                         if (cellData == "0.00" && row == 1)
                             listColumns.push(col);
                     }
                 },
                 {
                     "title": tituloMeses[7], data: "Mes8Total", "width": "85px",
                     createdCell: function (td, cellData, rowData, row, col) {
                         if (cellData == "0.00" && row == 1)
                             listColumns.push(col);
                     }
                 },
                 {
                     "title": tituloMeses[8], data: "Mes9Total", "width": "85px",
                     createdCell: function (td, cellData, rowData, row, col) {
                         if (cellData == "0.00" && row == 1)
                             listColumns.push(col)
                     }
                 },
                 {
                     "title": tituloMeses[9], data: "Mes10Total", "width": "85px",
                     createdCell: function (td, cellData, rowData, row, col) {
                         if (cellData == "0.00" && row == 1)
                             listColumns.push(col);
                     }
                 },
                 {
                     "title": tituloMeses[10], data: "Mes11Total", "width": "85px",
                     createdCell: function (td, cellData, rowData, row, col) {
                         if (cellData == "0.00" && row == 1)
                             listColumns.push(col);
                     }
                 },
                 {
                     "title": tituloMeses[11], data: "Mes12Total", "width": "85px",
                     createdCell: function (td, cellData, rowData, row, col) {
                         if (cellData == "0.00" && row == 1)
                             listColumns.push(col);
                     }
                 },
                 { data: "TotalRecuperacion", "width": "85px" },
                 { data: "CxCMargen", "width": "85px" }
                ],
                "paging": false,
                "info": false,
            });
/* 
    Este es una de las clases que quiero agregar.
*/

.dt-head-center {
    text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

<table class="table table-responsive display" id="tblTotales" cellspacing="0" width="100%">
                <thead style="background-color: coral;">
                    <tr>
                        <th>Importe CxC</th>
                        <th>Mes1</th>
                        <th>Mes2</th>
                        <th>Mes3</th>
                        <th>Mes4</th>
                        <th>Mes5</th>
                        <th>Mes6</th>
                        <th>Mes7</th>
                        <th>Mes8</th>
                        <th>Mes9</th>
                        <th>Mes10</th>
                        <th>Mes1</th>
                        <th>Mes12</th>
                        <th>Total</th>
                        <th>CxC Por Margen</th>
                    </tr>
                </thead>
            </table>

0

2 respuestas 2

3

Puedes utilizar

$('#tblTotales').addClass('dt-head-center');
1
  • @AaronRomero excelente! Recuerda marcarla como correcta mi respuesta si soluciono tu problema :)
    – sioesi
    el 1 jun. 2017 a las 19:35
2

Puedes modificar tu regla css para que cambie solo el encabezado y no hay que agregar una linea en jQuery o javascript la dejarías de esta forma:

#tblTotales th{
  text-align: center;
}
0

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.