【问题标题】:Jquery Sorting DataTablejQuery排序数据表
【发布时间】:2015-06-12 05:53:28
【问题描述】:

我在表格中有一个大小列,它以单位显示文件的大小(例如1KB、10MB、1GB 等)。

由于单位部分是字符串,整个大小值作为字符串输入到表中,因此当排序完成时,它会进行字符串排序。 例如,它的排序形式如下:5KB500MB6KB,这是不正确的。

所以我想知道这个问题的解决方案是什么?有没有什么参数设置可以解决这个问题?

【问题讨论】:

  • 请您把代码粘贴到这里以便我们提供帮助好吗?
  • 只是一个建议,将它们全部转换成KB或MB然后aaSorting和bsort就可以工作了。

标签: jquery sorting 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>

【讨论】:

    猜你喜欢
    • 2014-05-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-01-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-07-03
    相关资源
    最近更新 更多