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

使用 DataTables 动态地居中列内容

  • 772

我试图在一个有DataTables动态接收参数但它不起作用的表中居中n 个列。

我已尝试使用以下代码，但我需要该值是动态的，并且根据我发送的数字从最后一个到第一个居中列：

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

只有您收到的特定编号的列居中。

javascript

3 Answers

  1. Best Answer

    DataTables 文档不是很清楚，而且通常已经过时了，我最近也有同样的要求，过程如下：

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

    默认情况下，如果没有接收到参数，该函数会将最后两列居中，否则将显示的数量居中。

    希望它是您正在寻找的东西。

    • 4

  2. 不要让自己复杂化。您只能使用 css 解决它们。 

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

    一个深思熟虑的 css 规则不会破坏你的桌子。

    • 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%'}
            ]
        } );

    这很神奇（类名：“文本中心”）

    • 0