Home / Questions / 289533
Accepted
jsdnlb
Asked: 2020-08-31 16:43:46 +0800 CST 2020-08-31 16:43:46 +0800 CST

Center column content dynamically with DataTables

  • 772

I'm trying to center n number of columns in a table that has DataTables receiving the parameter dynamically but it doesn't work.

I have tried with the following code, but I need the value to be dynamic, and the columns to be centered from the last to the first according to the number I send:

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

Only the column with the specific number you receive is centered.

javascript

3 Answers

  1. Best Answer

    The DataTables documentation is not that clear and is usually out of date, I recently had the same request and the process was as follows:

    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
    });
}

    By default the function will center the last two columns if no parameter is received, otherwise it centers the indicated amount.

    Hopefully it's what you're looking for.

    • 4

  2. Do not complicate yourself. You can solve them only with css. 

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

    A well thought out css rule will not break your table.

    • 0 
  3. $('#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%'}
            ]
        } );

    this does the magic (className: "text-center")

    • 0