如何在 jQuery DataTables 中对文件大小进行排序答案

【问题标题】：How to sort file sizes in jQuery DataTables如何在 jQuery DataTables 中对文件大小进行排序
【发布时间】：2016-07-21 02:08:00
【问题描述】：

我正在使用 jQuery DataTables 插件来显示我的数据库中的记录。在我的数据库中，我有一个名为 size 的表，它包含存储文件大小的 varchar 数据类型，所以这里是我所拥有的示例

当显示在我的表格中时，我有这个按钮，它应该将文件大小排序为 asc 或 desc 顺序，但它不能正确地对记录进行排序，例如这个

我现在对文件大小进行排序的代码如下所示

$("#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>

关于如何正确执行此操作的任何想法？

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

有一个 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>

【讨论】：

嗨，我的文件大小会有小数点吗？谢谢
这是我初始化 detailTable 的方法，但它不起作用。任何想法？ <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>

【解决方案2】：

这是适用于 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" ]],
        } );
    });

【讨论】：

无需使用插件的好例子。