How to sort file sizes in jQuery DataTables
Question
I'm using jQuery DataTables plugin to show the records from my database. In my database I have this table named size and it contains varchar datatype that stores file sizes so here are samples of what I have
When displayed in my tables I have this button that is supposed to sort the file sizes into asc or desc order but it does not sort the records properly say for example this one
my code right now to sort the filesize looks like this
$("#sortfilesize").click(function() {
if(checkb ==0){
oTable.order( [ 5, 'asc' ] );
checkb = 1;
}else{
oTable.order( [ 5, 'desc' ] );
checkb = 0;
}
oTable.draw();
});
update
i have downloaded file-size.js then when initializing my detail table it looks like this
<script type="text/javascript">
$(document).ready(function(){
$('#detailTable').DataTable({
bPaginate: false,
"columnDefs": [{ "type": "file-size", "targets": 5 }],
"aoColumnDefs": [{ "bVisible": false, "aTargets": [1,6,7,8,9,10,11] }],
"aaSorting": [[ 1, "asc" ]],
});
});
</script>
Any ideas on how to do this properly?
2 answers
solution1
3 ACCPTED 2016-07-21 02:45:49
There is a DataTables sorting plug-in for that - File size . From the manual:
When dealing with computer file sizes, it is common to append a post fix such as B, KB, MB or GB to a string in order to easily denote the order of magnitude of the file size. This plug-in allows sorting to take these indicates of size into account.
In addition to jQuery and DataTables library you need to include the latest plug-in script (see plug-in page for the up-to-date link).
Sample initialization code is shown below:
$('#example').DataTable({
"columnDefs": [
{ "type": "file-size", "targets": 1 }
]
});
Property targets indicates zero-based column index that contains file sizes.
See example below for demonstration.
$(document).ready(function() { $('#example').DataTable({ "columnDefs": [ { "type": "file-size", "targets": 1 } ] }); });
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script> <script src="//cdn.datatables.net/plug-ins/1.10.7/sorting/file-size.js"></script> </head> <body> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Size</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Size</th> </tr> </tfoot> <tbody> <tr> <td>Small.mp3</td> <td>9 KB</td> </tr> <tr> <td>Normal.mp3</td> <td>8 MB</td> </tr> <tr> <td>Large.mp3</td> <td>7 GB</td> </tr> <tr> <td>Smallest.mp3</td> <td>10 B</td> </tr> </tbody> </table> </body> </html>
solution2
1 2020-10-10 21:29:30
Here's my solution which works for KB and MB. You could account for GB with another elseif conditional. This works for data like this:
128 <- bytes
16KB <- 16 Kilobytes
1.4MB <- 1.4 Megabytes
Use my code in case you don't want to mess with the plugin or can't get it working.
jQuery.fn.dataTableExt.oSort['file-size-asc'] = function (a, b) {
if (a.includes('KB')) {
a = parseFloat(a.replace('KB','')) *1024;
} else
if (a.includes('MB')) {
a = parseFloat(a.replace('MB','')) *1024*1024;
}
if (b.includes('KB')) {
b = parseFloat(b.replace('KB','')) *1024;
} else
if (b.includes('MB')) {
b = parseFloat(b.replace('MB','')) *1024*1024;
}
return (( a > b ) ? 1 : -1);
};
jQuery.fn.dataTableExt.oSort['file-size-desc'] = function (a, b) {
if (a.includes('KB')) {
a = parseFloat(a.replace('KB','')) *1024;
} else
if (a.includes('MB')) {
a = parseFloat(a.replace('MB','')) *1024*1024;
}
if (b.includes('KB')) {
b = parseFloat(b.replace('KB','')) *1024;
} else
if (b.includes('MB')) {
b = parseFloat(b.replace('MB','')) *1024*1024;
}
return (( a > b ) ? -1 : 1);
};
$(document).ready(function() {
$("#my_data_table").dataTable( {
"pageLength": 25,
"aoColumns": [{"sType": "file-size"}],
"aaSorting": [[ 0, "desc" ]],
} );
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.