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

Question

我一直在使用 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>

Answer 1

您分享的 link 中提供了答案

使用自定义排序键

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

<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>

Answer 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

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

此贴仅用于帮助可能遇到类似问题的其他人。

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

How to sort a table column numerically and alphabetically?

html

javascript

sorttable.js