Question

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

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

我已经为此表运行了Mottie's tablesorter，默认行为是查看整数并仅根据其值进行排序。好吧，正如您所知，9.46 Mbps远大于901 Kbps，但是表排序器仅查看数字值并对表进行排序，以使901 Kbps> 9.46 Mbps。

我已经审查了custom parsers，但老实说我对JS的了解不多，所以我很难使它正常工作。

我的数据表<table id="vlan-table">是在网页加载后通过Jquery加载的，然后vlan-table每60秒重新加载一次以获取最新数据（也通过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:的{{1}}变量，并且在.tablesorter函数中，“带宽”解析器按其索引号应用于列（其中第一列是索引0）。

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

对于以后发现有帮助的任何人，请随时发表评论！

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

1 个答案: