如何按数字和字母顺序对表格列进行排序？

【问题标题】：How to sort a table column numerically and alphabetically?如何按数字和字母顺序对表格列进行排序？
【发布时间】：2015-05-13 09:01:13
【问题描述】：

我一直在使用sorttable 对我网页上的表格进行排序，它在大多数情况下都有效，我唯一的问题是我正在尝试对包含字母和数字的服务器进行排序。按字母顺序排序似乎是最好的情况，但每当我达到 > 100 的值时，它就会导致一个小问题。

输出将显示为 1,2,3,4,5,6,7,8,9,10,100,101,11,12,13,14,15,...,99

当然，如果我能在 99 之后用 100 得到它会更好，所以我将该列更改为按数字排序，并且它在大多数情况下都有效。我的最后一个问题是，现在我将具有相似名称的服务器彼此分开，例如：testServer1、Server1、testServer2、Server2、.... testServer99、Server99

输出图像：

如您所见，特别是在左侧，命名主机并没有链接在一起，因为数字是它的排序依据。

到 sorttable.js 的链接：

http://www.kryogenix.org/code/browser/sorttable/sorttable.js http://www.kryogenix.org/code/browser/sorttable/

Demo太长，这里是html，上面链接的javascript。

<!DOCTYPE html>
<html>
    <head>
        <!script to make table sortable>
        <script src="sorttable.js"></script>

        <meta http-equiv="pragma" content="no-cache">
        <title>Title</title>
        <style>
            body   {font-family:Arial, Helvetica, sans-serif;}
            h1, h2 {
               color:darkblue; 
               margin-bottom: 2px;
            }
            .good  {background-color: green;}
            .bad   {background-color: red;}
            .error {background-color: purple;}
            .resultTable, td, th {
               padding-left: 10px;
               padding-right: 10px;
               border-collapse: collapse;
               border: 1px solid black;
            }
            .resultTable th {
               background-color: darkblue;
               color: white;
            }
            .resultTable td {
               max-width: 110px;
               text-overflow: ellipsis;
               overflow: hidden;
               white-space: nowrap;
            }
            .resultTable td:active {
                background-color: #ffff99;
                max-width: 900px;
            }
        </style>
    </head>
    <body>
        <h1 id="top">Header</h1>
        ---<br><br>
        <a href="#hypervisors">HyperVisors</a><br>
        <a href="#hosts">Hosts</a><br>

        <h2 id="hypervisors">HyperVisors</h2>
        <table class="resultTable" id="hypervisorTable">
          <!-- Table Header -->
          <tr>
            <th class=""sorttable_numeric">Host</th>
               <th>ql2xmaxqdepth</th>
               <th>ql2xloginretrycount</th>
               <th>qlport_down_retry</th>
               <th>VMware_version</th>
               <th>HBA</th>
               <th>Firmware_Version</th>
               <th>Driver_Version</th>
          </tr>

          <!-- Values  lentgh=26 first (hv%.int) -->
            <tr>
               <td>hv1.int</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
            </tr> 

            <tr>
               <td>hv2.int</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
            </tr> 

            <tr>
               <td>hv3.int</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
            </tr> 

            <tr>
               <td>hv4.int</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
            </tr> 

            <tr>
               <td>hv5.int</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
                  <td >n/a</td>
            </tr> 

          <!-- Values  lentgh>=27 first (hv%.int) -->
        </table>
        <a href="#top">Top</a><br>

        <h2 id="hosts">Hosts</h2>
        <table class="resultTable" id="hostTable">
          <!-- Table Header -->
          <tr>
            <th class="sorttable_numeric">Host</th>
               <th>kernel</th>
               <th>num_cpu</th>
               <th>memory</th>
               <th>selinux</th>
               <th>packages</th>
               <th>openssl</th>
               <th>bash</th>
               <th>irqbalance</th>
               <th>interface</th>
               <th>grub_etc_ls</th>
               <th>grub_boot_ls</th>
               <th>grub_etc_md5</th>
               <th>grub_boot_md5</th>
               <th>cpms</th>
               <th>pab</th>
               <th>cal</th>
               <th>loginproxy</th>
               <th>mediapreview</th>
               <th>svc-auditd</th>
               <th>svc-crond</th>
               <th>svc-network</th>
               <th>svc-nrpe</th>
               <th>svc-sshd</th>
               <th>svc-snmpd</th>
               <th>svc-rsyslog</th>
               <th>svc-irqbalance</th>
               <th>svc-monit</th>
               <th>svc-limsender</th>
               <th>SCSI_Timeout_sda</th>
               <th>SCSI_Timeout_sdb</th>
               <th>SCSI_Timeout_sdc</th>
               <th>SCSI_Timeout_sdd</th>
               <th>SCSI_Timeout_sde</th>
          </tr>

          <!-- Values -->
          <tr>
             <td>ansible01</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >Not verified</td>
                <td >Not verified</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
          </tr>
          <tr>
             <td>appsproxy01</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >Not verified</td>
                <td >Not verified</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
          </tr>
          <tr>
             <td>appsproxy02</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >Not verified</td>
                <td >Not verified</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
          </tr>
          <tr>
             <td>be01</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >Not verified</td>
                <td >Not verified</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
          </tr>
          <tr>
             <td>be02</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >Not verified</td>
                <td >Not verified</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
          </tr>
          <tr>
             <td>be03</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >Not verified</td>
                <td >Not verified</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
          </tr>
          <tr>
             <td>be04</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >Not verified</td>
                <td >Not verified</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
          </tr>
          <tr>
             <td>be99</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >Not verified</td>
                <td >Not verified</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
          </tr>
          <tr>
             <td>be107</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >Not verified</td>
                <td >Not verified</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
          </tr>
          <tr>
             <td>be100</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >Not verified</td>
                <td >Not verified</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
          </tr>
          <tr>
             <td>be101</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >Not verified</td>
                <td >Not verified</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
          </tr>
          <tr>
             <td>deployment01</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >Not verified</td>
                <td >Not verified</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
          </tr>
          <tr>
             <td>dsaloc1-01</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >Not verified</td>
                <td >Not verified</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
          </tr>
          <tr>
             <td>dsaloc1-02</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >Not verified</td>
                <td >Not verified</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
                <td >n/a</td>
          </tr>

        </table>
        <a href="#top">Top</a><br>

        <p>
           Words <i>Name</i>&#0153;<br>
           &copy; ----
        </p>

        <script>
            var sortHyper = document.getElementById("hypervisorTable");
            var sortHost = document.getElementById("hostTable");

            sorttable.makeSortable(sortHyper);
            sorttable.makeSortable(sortHost);
        </script>

    </body>

【问题讨论】：

  • 您正在处理特定问题，但问题中没有演示。没有多少人愿意设置一个演示来进行实验以帮助您。因此，如果您真的希望有人帮助您，则需要使其变得简单方便。否则，您得到好的答案的更改很少。
  • 你说得对，我一会儿就放一个demo

标签： javascript html sorttable.js


【解决方案1】：

您分享的链接中有答案

使用自定义排序键

您可能有一些数据按顺序排列，但未由排序表识别。解决此问题的方法是使用自定义排序键。以一列拼写出来的数字为例。通常， sorttable 在这里不起作用。它将拼出的数字视为字符串，因此将按字母顺序对数字进行排序，即五、四、一、三、二。为了解决这个问题，您可以在表格中的单元格上指定一个 sorttable_customkey 属性，并且 sorttable 将在对表格进行排序时使用该属性的内容而不是单元格本身中的文本。因此，例如，您的表格可能如下所示：

<table class="sortable">
<tr><th>Number (spelled)</th><th>Person</th></tr>
<tr><td sorttable_customkey="2">two</td><td>Jan</td></tr>
<tr><td sorttable_customkey="3">three</td><td>Bruce</td></tr>
<tr><td sorttable_customkey="1">one</td><td>Steve</td></tr>
</table>

【讨论】：

  • 我的表是由服务器的 .yaml 文件构建的，尽管从稳健性的角度来看，这是一个可能的解决方案单元格的值。
  • 根据文档，没有其他解决方案。您必须找到任何其他插件来满足您的要求，例如数据表、jplist 等
  • 我担心这可能是这种方式，我整个上午都在思考如何权衡这些值，我可能会再看一下自定义键，看看我是否可以动态实现它们。
  • 最终让它以这种方式工作，sorttable_customkey="hv0004" 这意味着我对字符和数字进行了拆分，所有数字现在都有 4 位数字，前导零。所以“alpha-sorting” " 有效，be12 在 be100 之前
【解决方案2】： 
# Custom filter to enable a proper sorting by hostnames by padding zeros.
def hostname_padding(env,host):
    hostname = host.split(".",1)[0]

    # All NON-Digits, only taking first which fits our purpose
    try:
        hostname_padded = re.findall(r"([\D.]*\D+)", hostname)[0]
    except:
        hostname_padded = ""

    # All Digits - results is a string, padding to 4 digits
    hostnameDigits = re.findall(r"([\d.]*\d+)", hostname)
    for element in hostnameDigits:
        hostname_padded+=element.zfill(4)

    return hostname_padded

这是创建自定义密钥的 python 脚本

            <table class="resultTable sortable">
          <!-- Table Header -->
          <tr>
            <th id="hostname">Host</th>
            {%- for category in categories %}
               <th>{{ category }}</th>
            {%- endfor %}
          </tr>

          <!-- Values, presorted -->
          {%- for host in results|sort %}
          <tr>
             <td sorttable_customkey="{{ host|hostname_padding }}">{{ host }}</td>
             {%- for category in categories %}
                <td {% if results[host][category][1] == "OK"  %}class=good{% endif %}{% if results[host][category][1] == "NOK"  %}class=bad{% endif %}{% if results[host][category][1] == "ERROR"  %}class=error{% endif %}>{{ results[host][category][0] }}</td>
             {%- endfor %}
          </tr> 
          {%- endfor %}
        </table>

这是要填充的 HTML

这个答案是我的一个朋友提供的，我不相信这个解决方案。

发布只是为了帮助可能遇到类似问题的其他人。

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-06-25
    • 1970-01-01
    • 2018-03-29
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode