How to order Datatables by ignoring accents?

Asked

Viewed 2,366 times

1

I’m experimenting with Datatables and by sorting the table that has strings starting with accents, they appear at the end of the table. How to order the table in Brazilian Portuguese format?

inserir a descrição da imagem aqui

As you can see the words starting with accent appear at the bottom of the list:

inserir a descrição da imagem aqui

The example can be seen here: http://jsfiddle.net/HEDvf/2523/

2 answers

2


He had built this code based on the code that works the Persian language. He simply replaces accented characters with no accents.

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "portugues-pre": function ( data ) {
        var a = 'a';
        var e = 'e';
        var i = 'i';
        var o = 'o';
        var u = 'u';
        var c = 'c';
        var special_letters = {
            "Á": a, "á": a, "Ã": a, "ã": a, "À": a, "à": a,
            "É": e, "é": e, "Ê": e, "ê": e,
            "Í": i, "í": i, "Î": i, "î": i,
            "Ó": o, "ó": o, "Õ": o, "õ": o, "Ô": o, "ô": o,
            "Ú": u, "ú": u, "Ü": u, "ü": u,
            "ç": c, "Ç": c
        };
        for (var val in special_letters)
           data = data.split(val).join(special_letters[val]).toLowerCase();
        return data;
    },
    "portugues-asc": function ( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    "portugues-desc": function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
} );

$('.datatable').DataTable({
    "columnDefs": [{ type: 'portugues', targets: "_all" }]
});

2

You need to create your own sort algorithm, using type detection sort as described here.

It is necessary to have a function that normalizes the string, that is, remove the special characters and accentuation. This should be used in the creation of a Datatables sorting algorithm, via the object extension $.fn.dataTableExt.oSort.

After created, the column that will use this algorithm will have to be specified in the Datatables startup object, in the key aoColumns, as seen here.

In your case, javascript would look like this:

// Esta é a função que normalizará as string no momento da comparação.
// É necessário substituir aqui qualquer caracter que seja possível
// ter acentuação. Coloque apenas alguns como exemplo.
function clearString (str) {
  return str.toLowerCase()
    .replace(/[áãà]/g, 'a')
    .replace(/é/g, 'e')
    .replace(/í/g, 'i')
    .replace(/[óõô]/g, 'o')
    .replace(/[úü]/g, 'u')
    .replace(/ç/g, 'c');
}

$(document).ready(function() {
  // Aqui são criados os plugins de ordenação. O nome deve ser separado
  // por traços `-` e é necessário criar duas versões do algorítmo,
  // uma para ordenação ascendente e outra para descendente, ambas
  // com o sulfixo relativo.
  $.fn.dataTableExt.oSort['clear-string-asc'] = function (x, y) {
    return clearString(x) > clearString(y) ? 1 : -1;
  };

  $.fn.dataTableExt.oSort['clear-string-desc'] = function (x, y) {
    return clearString(x) < clearString(y) ? 1 : -1;
  };


  // Aqui, a propriedade `aoColumns` deve receber uma array com os
  // plugins de ordenação. No exemplo, a primeira coluna usará o plugin
  // `clear-string` quando o valor for do tipo string, especificado pela
  // propriedade `sType`. Caso queria manter a ordenação padrão, apenas
  // passe `null`, não deixe de preencher cada coluna da tabela, caso
  // ocorrerá contrário um erro. Como sua tabela tem 5 colunas, 5 itens
  // são passados na array.
  $('#example').dataTable({
    "sPaginationType": "full_numbers",
    'aoColumns': [
      { 'sType': 'clear-string' },
      null,
      null,
      null,
      null
    ]
  });
});

I believe that from here I can implement according to your needs. Remember to complement the normalization function of strings.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.