1

Cómo puedo agregar estilos CSS (centar columnas, font-size, color etc) a mi DATATABLE y por ejemplo en fecha pago dar otro formato como dd/mm/aaaa cosas de ese estilo

function listar() {
  var tablaPagos = $("#payments_table").DataTable({
    ordering:false,
    "destroy":true,
    "ajax":{
      "method":"POST",
      "url":"listar_pagos.php"
    },
    "columns":[
      {"data":"idPago"},
      {"data":"nombreCliente"},
      {"data":"numeroSubcredito"},
      {"data":"campanaProducto"},
      {"data":"tipoPago"},
      {"data":"fechaPago"},
      {"data":"montoPago"},
      {"data":"fechaRegistro"},
      {"defaultContent":"<button type='button' class='btn btn-primary none-shadow' 
onClick='eliminarPago(this)'><i class='fa fa-trash-o'></i></button>"}
    ]
  });
}

Aparece de la siguiente manera introducir la descripción de la imagen aquí

4
  • Para el CSS lo puedes aplicar sobre el mismo datatable luego de haberlo llamado, solo haces un CSS propio y ya. Para el formato, dado que es visualizacion, debes usar datatables formatter para mostrar como quieres los datos.
    – Excorpion
    Commented el 29 sept. 2021 a las 16:51
  • ¿Podrías explicarme como hago eso? Imagine que era desde un fichero css pero como lo aplico ¿?
    – Minor
    Commented el 29 sept. 2021 a las 16:53
  • Los cambios a estilos CSS se aplican a las clases que crees o quieras modificar. Si una clase tiene X nombre, afectas a esa clase.
    – Excorpion
    Commented el 29 sept. 2021 a las 16:55
  • solo agrega text-align: center; a table en tu css
    – Roy
    Commented el 29 sept. 2021 a las 20:48

1 respuesta 1

2

Para cambiar datos antes de mostrarse en la tabla, debes usar el parámetro render y una función donde puedes retornar el valor cambiado:

function listar() {
  var tablaPagos = $("#payments_table").DataTable({
    ordering:false,
    "destroy":true,
    "ajax":{
      "method":"POST",
      "url":"listar_pagos.php"
    },
    "columns":[
      {"data":"idPago"},
      {"data":"nombreCliente"},
      {"data":"numeroSubcredito"},
      {"data":"campanaProducto"},
      {"data":"tipoPago"},
      {"data":"fechaPago"},
     {"data":"montoPago",
       "render": function ( data, type, row ) {
                     
                      return "$"+data+" MXN";
                 }
      },
      {"data":"fechaRegistro"},
      {"defaultContent":"<button type='button' class='btn btn-primary none-shadow' 
onClick='eliminarPago(this)'><i class='fa fa-trash-o'></i></button>"}
    ]
  });
}

Para estilizar, puedes hacerlo por columna

"columns":[
      {"data":"idPago", "className":"my-class"},

O debuggear en opciones de desarrollador y fijarte en las clases que añade Datatable a los elementos HTML, y poner css con esas clases.

2
  • Sería tan amable de colocar un poco más de código por ejemplo para mostrar $1500 MXN, apenas ando aprendiendo jQuery y DataTables
    – Minor
    Commented el 7 oct. 2021 a las 16:42
  • Edité mi respuesta, revísalo. Commented el 7 oct. 2021 a las 19:07

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.