Sort by Value in DataTables

Posted on

Question :

I’m using the Bootstrap SB Admin2, which makes use of the DataTables component.

In my jsp page I’m loading the following table:

<table class="table table-striped table-bordered table-hover" id="dataTables-example">
      <th>Nome RCA</th>

    <c:forEach var="rca" items="${listaTeste }">
      <tr class="odd gradeX">
        <td>${rca.codusur }</td>
        <td>${rca.nome }</td>
        <td style="text-align: right">${rca.meta }</td>

and the following code for the javascript:

$(document).ready(function() {
            responsive: true,
            "order": [2, 'asc']

In this way the code works, for example:

2512    Aa                         227,27
5769    Ma                       2.318,18
2945    Mb                       4.772,72

However, if I request a formatting for jstl like this:

<td style="text-align: right"><fmt:formatNumber value="${rca.meta }" type="currency" /></td>

The table is sorted like this:

5769    Ma                      R$ 2.318,18
2512    Aa                      R$   227,27
2945    Mb                      R$ 4.772,72

From what I understand it looks like it is reading as string, some solution to this case? I have already looked at the documentation and found nothing.

PS : I’m sorry for the length of the question, I’m new here but wanted to explain all the details.

I tried to change the pattern in fmtNumber, using pattern="#,##0.00" , and the classification remains wrong, but using pattern="0.00" only so it can sort.


Answer :

Correct will not work the code precisely because of the formatting of the number, so you correctly sort the format of the number should be in 0.00.

What I would suggest to you would be as follows, inserting into the td's the already converted value using the 0.00 mask and reconfiguring the display formatting at startup of datatables .

This way:

<td style="text-align: right"><fmt:formatNumber value="${rca.meta }" pattern="0.00" /></td>

And the initialization of datatables would be, remembering that you will need to add the datatables sorting plugin.

  //demais configurações
  "aoColumns": [
    //demais colunas
    { "sType": "numeric-comma" }, //aplica a máscara monetária

follow the reference to the list of plugins: link


At this point the plugin is able to handle this problem using the language attribute to translate parts of the system into the native language of the system and to enter regional settings, to work around this problem use as follows.

$('#dataTables-example').DataTable( {
    "language": {
        "decimal": ",",
        "thousands": "."
} );

For more information, visit the link


Leave a Reply

Your email address will not be published. Required fields are marked *