如何使用 bootstrap table 中的文件大小进行排序？

Question

我建了这个网格：

到目前为止一切顺利，但是当我将具有文件大小的列标记为可排序时，它排序不佳。如何使文件大小列可排序？

谢谢。

Answer 1

会不会是您的数据与列的格式有问题？ Here is a JSFIDDLE example modified from the bootstrap-table examples 表示 data-sortable 装饰。请注意，数据没有 'MB' - 这使数据与数据的表示分开。 data-formatter decoration 允许你指定一个函数来修饰数据（或者创建按钮或其他HTML）。

$(函数(){ $('#table').bootstrapTable({ 数据：数据 }); });

function formatMegaBytes(value,row,index){
return value + ' MB';

}

Answer 2

我手工做到了：

HTML:

<table id="table" class="table borderless">
    <thead>
        <tr>
            <th data-field="Type" data-sortable="false" data-formatter="typeFormatter" data-cell-style="typeStyle" class="text-center">Type</th>
            <th data-field="Content Type" data-sortable="true">Content Type</th>
            <th data-field="Name" data-sortable="true">Name</th>
            <th data-field="Received" data-sortable="true">Received</th>
            <th data-field="File Size" data-sortable="true" data-sorter="filesizeSorter">File Size</th>
            <th data-field="" data-formatter="operateFormatter" data-events="operateEvents"></th>
        </tr>
    </thead>
</table>

JavaScript:

//filesize column custom formatter
function filesizeSorter(a, b) {

    var a_number = retnum(a);
    var b_number = retnum(b);

    a = a_number;
    b = b_number; 
    if (a > b) return 1;
    if (a < b) return -1;
    return 0;
}

//return bytes of filesize
function retnum(number) {
    var num = number.replace(/[^0-9]/g, '');
    var filesizename = number.replace(/[^a-zA-Z]+/g, '').toUpperCase();
 
    num = parseInt(num, 10);

    switch (filesizename) {
        case "KB":
            num = num * 1024;
            break;
        case "MB":
            num = num * Math.pow(1024, 2);
            break;
        case "GB":
            num = num * Math.pow(1024, 3);
            break;
        case "TB":
            num = num * Math.pow(1024, 4);
            break;
    }

    return num;
}

如何使用 bootstrap table 中的文件大小进行排序？

How to do sorting with filesizes in bootstrap table?

javascript

jquery

bootstrap-table