jQuery DataTable - Column data.toUpperCase() is not working

Question

I tried using columnDefs to set jQuery DataTable columns to uppercase:

columnDefs: [
  {
    targets: [1, 2],
    render: function (data) {
      return data.toUpperCase();
    }
  }
]

This works for all of the columns that I specify as targets, except for one. The attribute type is nvarchar(max). I know that I can use the following to set the entire DataTable to uppercase, but I would like to do it per column:

<style> td { text-transform: uppercase } </style>

This column does display the correct data. However, when I specify it as a target in columnDefs, the DataTable says that it is loading and does not display any of the data.

Answer 1

You can apply for columns.className settings.

columnDefs: [
  {
    className: "upper"
    targets: [1, 2]
  }
]

And apply this styling rule so all the <td> elements with class upper will take the effect.

td.upper { 
  text-transform: uppercase 
}