Add class to the table

Question

Add class to the table

Navigation

#1 by (4 votes)
#2 by (2 votes)

3

I have a series of tables generated by this api.

In its version 1.10.13.

The headings should be centered and the body ones aligned to the right.

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>

jquery datatables

asked by Aaron Romero 01.06.2017 в 21:09

source

2 answers

2

You can modify your css rule so that it changes only the header and you do not have to add a line in jQuery or javascript you would leave it like this:

#tblTotales th{
  text-align: center;
}

answered by 01.06.2017 в 22:20

Progress bar or wait message, webview Android Studio Libraries and headers in c ++

score 4 · Accepted Answer

4

You can use

$('#tblTotales').addClass('dt-head-center');

answered by 01.06.2017 / 21:32

source