如何使用Jquery tablesorter对包含Kbps Mbps Gbps的列进行排序？

Question

我有一个网页，显示网络带宽数据like this表。请注意，我只包含了几行作为示例，但我的表包含数百行。

包含带宽度量的列将以三个单位之一显示该值：Kbps，Mbps或Gbps。如何配置jquery tablesorter以注意单元？

我已经为此表运行了Mottie's tablesorter，默认行为是查看整数并仅根据其值进行排序。嗯，正如您所知，9.46 Mbps比901 Kbps大得多，但是tablesorter只查看数值并对表进行排序，使得901 Kbps> 9.46 Mbps。

我已经回顾了custom parsers，但说实话，我不太了解JS，所以我很难让它工作。

加载网页后，我的数据表<table id="vlan-table">通过Jquery加载，然后每隔60秒重新加载vlan-table以获取最新数据（也通过Jquery），因此我的tablesorter插件已经比平时更复杂了。

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
  <script type="text/javascript" src="plugins/jquery.tablesorter.js"></script>

<!-- Load vlan-table on page load -->
  <script type="text/javascript">
    $(function ($) {
      $("#vlan-table").load("data/vlan-table.html", callback);
      function callback() {
        $("div#vlan-table table").tablesorter({
          sortList: [[0, 0]]
        });
      }
    });
  </script>

<!-- Reload vlan-table table every 60 seconds -->
  <script type="text/javascript">
    window.onload = setupRefresh;
    function setupRefresh() {
      setInterval("refreshBlock();", 60000);
    }
    function refreshBlock() {
      $('#vlan-table').load("data/vlan-table.html", callback);
      function callback() {
        $("div#vlan-table table").tablesorter({
          sortList: [[0, 0]]
        });
      }
    }
  </script>

我试图创建一个自定义解析器，用一个应该允许正确排序的数字替换每个单位Kbps / Mbps / Gbps（以及它之前的空间），但我不知道在哪里放置这个自定义解析器：

$.tablesorter.addParser({
        id: 'data-rate-parser',
        is: function(s, table, cell, $cell){
          return false;
        },
        format: function(s, table, cell, cellIndex) {
          .replace(/ Kbps/,1000)
          .replace(/ Mbps/, 1000000)
          .replace(/ Gbps/, 1000000000)
        },
        type: 'numeric'
      });

我已经尝试将它放在页面的自己的<script></script>部分，并在callback()函数内部没有运气。

理想情况下，最好的选择是将每个带宽度量转换回“每秒位数”，仅用于排序，但在JS中执行此操作超出了我的技能水平。谢谢！

Answer 1

哇噢！我最终搞清楚了！

This answer到另一个问题有助于向我展示函数的addParser部分到底在哪里。

Here is a working JS Fiddle。如果JS Fiddle发生任何事情，我会把JS代码放在下面。

$(document).ready(function() {

  $.tablesorter.addParser({
    id: 'bandwidth',
    is: function(s) {
      return false;
    },
    format: function(s) {
      return s.toLowerCase()
        .replace(/\.\d+ kbps/, 1000)
        .replace(/\.\d+ mbps/, 1000000)
        .replace(/\.\d+ gbps/, 1000000000)
    },
    type: 'numeric'
  });


  $("#vlan-table").tablesorter({
    sortInitialOrder: 'desc',
    sortRestart: true,
    headers: {
    1: {
    sorter: 'bandwidth'
    },
      2: {
        sorter: 'bandwidth'
      },
      4: {
        sorter: 'bandwidth',
        sortInitialOrder: 'asc'
      }
    }
  });
});

我原来的addParser函数中的问题是：

• 缺少返回s（）
• 简单地用数字替换“Kbps”是行不通的，因为“Kbps”在小数点之后。我用简单匹配文字句号，一个或多个数字和其中一个单位的正则表达式替换了简单替换。因此，排序功能基本上将“123 Kbps”替换为“1231000”，并将“313 Mbps”替换为“3131000000”，允许它正确地对表进行排序。
• 我没有指定我想将自定义解析器应用于哪些表列。请注意，addParser包含我已分配id:的bandwidth变量，而在.tablesorter函数中，'bandwidth'解析器通过其索引号应用于列（其中第一列是索引0）。

对于我的页面重新加载表60秒以显示更新的数据，我只需将.tablesorter和.tablesorter.addParser放在我的callback（）函数中。 Here是一个问题和答案，帮助我了解如何使用回调。

对于将来发现这有用的任何人，请随时发表评论！