1

Estoy trabajando con DataTables, tengo un ajax que me devuelve objetos en minúsculas y otras en mayúsculas. Pero quiero que todas las celdas estén en mayúsculas.

Aquí recepciono la data del api.

columns: [
                {data: "manifestado"},
                {data: "nave"},
                {data: "tipo_nave"},
                {data: "nombre_linea"},
                {data: "nro_viaje"},
                {data: "agente_maritimo"},
                {data: "eslora"},
                {data: "eta"},
                {data: "etb"},
                {data: "etc"},
                {data: "etd"},
                {data: "carga"},
                {data : "proyecto_articulo"}
            ],

Si necesitan alguna otra información(código), se las pasaré.

Gracias

1
  • Está solucionado: Cogí el ID de mi dataTables y mediante css puse: ``` #example{ text-transform: uppercase !important; } Saludos Commented el 5 ene. 2018 a las 22:21

4 respuestas 4

1

Creo que es más fácil agregando css al elemento que quieras pasar a mayúsculas.

Puedes utulizar la propiedad text-transform: uppercase; ya sea que lo pongas directamente en la etiqueta o en una clase.

text-transform: uppercase;
5
  • Ya lo intenté y no se puede. Gracias Commented el 5 ene. 2018 a las 21:50
  • ¿Qué es lo que no se puede? Commented el 5 ene. 2018 a las 21:52
  • Transformar los objetos a mayúsculas. Commented el 5 ene. 2018 a las 21:57
  • Me retracto, disculpe, soy muy noob en esto. Estas en lo correcto, cogí el id de mi datatables y bueno puse lo que me recomendaste. ` #example{ text-transform: uppercase !important; }` Gracias Commented el 5 ene. 2018 a las 22:18
  • Que bien!! ¿puedes poner mi respuesta como tu solución a tu problema? Commented el 6 ene. 2018 a las 14:50
1

Además del atributo data debes añadir el atributo render, que es una función que espera los parámetros item, type y row. Para tu caso en realidad sólo necesitas el item:

columns: [{
    data: "manifestado",
    render: function (item) {
      return item.toUpperCase();
    }
  },
  {
    data: "nave",
    render: function (item) {
      return item.toUpperCase();
    }
  },
  {
    data: "tipo_nave",
    render: function (item) {
      return item.toUpperCase();
    }
  },
  {
    data: "nombre_linea",
    render: function (item) {
      return item.toUpperCase();
    }
  },
  {
    data: "nro_viaje",
    render: function (item) {
      return item.toUpperCase();
    }
  },
  {
    data: "agente_maritimo",
    render: function (item) {
      return item.toUpperCase();
    }
  },
  {
    data: "eslora",
    render: function (item) {
      return item.toUpperCase();
    }
  },
  {
    data: "eta",
    render: function (item) {
      return item.toUpperCase();
    }
  },
  {
    data: "etb",
    render: function (item) {
      return item.toUpperCase();
    }
  },
  {
    data: "etc",
    render: function (item) {
      return item.toUpperCase();
    }
  },
  {
    data: "etd",
    render: function (item) {
      return item.toUpperCase();
    }
  },
  {
    data: "carga",
    render: function (item) {
      return item.toUpperCase();
    }
  },
  {
    data: "proyecto_articulo",
    render: function (item) {
      return item.toUpperCase();
    }
  }
];
4
  • Gracias por responder. Al utilizar lo que me recomiendas me tira este error. Uncaught TypeError: item.toUpperCase is not a function La verdad soy novato con todo esto, pero estoy investigando a fondo y estoy logrando varias cosas. Commented el 5 ene. 2018 a las 22:06
  • Pensándolo bien, si alguno de los campos es numérico, no debes tratar de pasarlo a mayúsculas
    – ffflabs
    Commented el 5 ene. 2018 a las 22:25
  • Lo intenté con un campo de tipo cadena y me vota ese error. Commented el 5 ene. 2018 a las 22:29
  • Y qué dice si antes haces console.log(item)?
    – ffflabs
    Commented el 5 ene. 2018 a las 22:33
1

Podrías considerar que se visualice en mayúscula con una clase de estilo o al momento de renderizar las celdas.

Utilizando estilo:

tr[role="row"] {
  text-transform: uppercase;
}

Al momento de renderizar:

"columnDefs": [{
        "render": function (data, type, row) {
            return data.toUpperCase();
        },
        "targets": "_all"
    }
]

Por ejemplo:

$(document).ready(function() {
    $('#example').DataTable( {
      "columnDefs": [
              {
                  "render": function ( data, type, row ) {                      
                      return data.toUpperCase();
                  },
                  "targets": "_all"
              }
          ]
    } );
} );
tr[role="row"] {
  text-transform: uppercase;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
      <tr>
          <th>Date</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Hola</td>
      </tr>
      <tr>
          <td>Mundo</td>
      </tr>
  </tbody>            
</table>


Referencia:

0

Necesitas mapearlos con el método map.

const data = { 
	columns: [
		{ data: "manifestado" },
		{ data: "nave" },
		{ data: "tipo_nave" },
		{ data: "nombre_linea" },
		{ data: "nro_viaje" },
		{ data: "agente_maritimo" },
		{ data: "eslora" },
		{ data: "eta" },
		{ data: "etb" },
		{ data: "etc" },
		{ data: "etd" },
		{ data: "carga" },
		{ data : "proyecto_articulo" }
	]
};

data.columns = data.columns.map(col => ({ data: col.data.toUpperCase() }));

console.log(data.columns);

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.