O DataTables é hoje uma dos plugin jQuery mas utilizado por resolver ordenamento e paginação de forma automática. Mas em qualquer ferramenta que tente fazer ordenamento sem reflection, ocorre um problema que é a identificação automática do tipo de dados da coluna ou lista ordenada.
Isto ser torna um problema no seguinte caso:
- 01/02/2015
- 02/01/2015
- 03/12/2014
Na lista acima as datas estão ordenadas como "string".
Por padrão, o plugin do dataTables reconhece automáticamente os tipos "string", "numeric", e, "date" , mas todos em formato americano.
Para burlar este problema, é possível criar um tipo de dado extendendo a api do jQuery (Clique em Result para ver o resultado ):
<div class="container">
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
<thead>
<tr>
<th>Data</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>05/02/2010</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>11</td>
<td>X</td>
</tr>
<tr>
<td>15/01/2010</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>21</td>
<td>X</td>
</tr>
<tr>
<td>22/01/2010</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>-4</td>
<td>X</td>
</tr>
<tr>
<td>10/06/2013</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>4</td>
<td>X</td>
</tr>
<tr>
<td>25/12/2010</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>4</td>
<td>X</td>
</tr>
<tr>
<td>05/01/2010</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>4</td>
<td>X</td>
</tr>
</tbody>
</table>
</div>
$(document).ready(function () {
$.extend(jQuery.fn.dataTableExt.oSort, {
"date-pt-pre": function (a) {
var x;
try {
var dateA = a.trim().split("/");
var day = parseInt(dateA[0], 10);
var month = parseInt(dateA[1], 10);
var year = parseInt(dateA[2], 10);
var date = new Date(year, month - 1, day);
console.log("convertendo a data: " + date);
x = date.getTime();
} catch (err) {
x = new Date().getTime();
}
return x;
},
"date-pt-asc": function (a, b) {
return a - b;
},
"date-pt-desc": function (a, b) {
return b - a;
}
});
$('#example').dataTable({
"sPaginationType": "full_numbers",
"aoColumns": [{
"sType": "date-pt"
},
null,
null, {
"sType": "numeric"
},
null]
});
});
Você pode testar o código acima no JsFiddle.