[英]How to sort file sizes in jQuery DataTables
我正在使用 jQuery DataTables 插件来显示我的数据库中的记录。 在我的数据库中,我有一个名为size
表,它包含存储文件大小的 varchar 数据类型,所以这里是我所拥有的示例
当显示在我的表格中时,我有这个按钮应该将文件大小排序为升序或降序,但它没有正确地对记录进行排序,例如这个
我现在对文件大小进行排序的代码如下所示
$("#sortfilesize").click(function() {
if(checkb ==0){
oTable.order( [ 5, 'asc' ] );
checkb = 1;
}else{
oTable.order( [ 5, 'desc' ] );
checkb = 0;
}
oTable.draw();
});
更新
我已经下载了 file-size.js 然后在初始化我的详细信息表时它看起来像这样
<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>
关于如何正确执行此操作的任何想法?
有一个 DataTables 排序插件 - File size 。 从手册:
在处理计算机文件大小时,通常会在字符串后附加 B、KB、MB 或 GB 等后缀,以便轻松表示文件大小的数量级。 此插件允许排序以考虑这些大小指示。
除了 jQuery 和 DataTables 库之外,您还需要包含最新的插件脚本(有关最新链接,请参阅插件页面)。
示例初始化代码如下所示:
$('#example').DataTable({
"columnDefs": [
{ "type": "file-size", "targets": 1 }
]
});
属性targets
指示包含文件大小的从零开始的列索引。
请参阅下面的示例进行演示。
$(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>
这是我的解决方案,适用于 KB 和 MB。 您可以使用另一个 elseif 条件来计算 GB。 这适用于这样的数据:
128 <- bytes
16KB <- 16 Kilobytes
1.4MB <- 1.4 Megabytes
如果您不想弄乱插件或无法使其正常工作,请使用我的代码。
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" ]],
} );
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.