How to sort the DataTables by ignoring accents?

1

I am experimenting with DataTables and when ordering the table that has strings starting with accents, they appear at the end of the table. How to sort the table in Brazilian Portuguese format?

Asyoucansee,thewordsstartingwithanaccentappearatthebottomofthelist:

The example can be seen here: link

    
asked by anonymous 23.04.2015 / 02:49

2 answers

2

I had built this code based on the code that works the Persian language. It simply replaces characters with accents 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" }]
});
    
26.04.2015 / 20:52
2

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

You must have a function that normalizes the string, that is, remove the special characters and accent. This should be used in creating a DataTables sort algorithm, by extending the $.fn.dataTableExt.oSort object.

Once created, the column that will use this algorithm must be specified in the DataTables startup object, in the aoColumns key, as seen here .

In your case, the 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 it according to your needs. Remember to supplement the string normalization function.

    
23.04.2015 / 04:50