How to sort a table column numerically and alphabetically?
Question
I have been using sorttable to sort the tables on my webpage and it works for the most part, my only problem is that I am trying to sort servers which contain letters and numbers. Sorting alphabetically seemed like the best case to go with but it resulted in a small problem whenever I reached a value > 100.
The output would read 1,2,3,4,5,6,7,8,9,10,100,101,11,12,13,14,15,...,99
Of course it would be much better if I could get this with 100 after 99 so I changed that column to be sorted numerically and it worked for the most part. My final issue is that now I am having servers with similar names be separated from each other eg: testServer1, Server1, testServer2, Server2,.... testServer99, Server99
Images of output:
As you can see, particularly on the left, like named hosts are not linked together as the numbers are what it is being sorted by.
Links to sorttable.js:
http://www.kryogenix.org/code/browser/sorttable/sorttable.js http://www.kryogenix.org/code/browser/sorttable/
Demo is too long, here it he html, javascript linked above.
<!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>™<br>
© ----
</p>
<script>
var sortHyper = document.getElementById("hypervisorTable");
var sortHost = document.getElementById("hostTable");
sorttable.makeSortable(sortHyper);
sorttable.makeSortable(sortHost);
</script>
</body>
2 answers
solution1
2 ACCPTED 2015-05-13 09:20:03
Answer was available in the link you shared
Using custom sort keys
You may have some data which does go in an order but isn't identified by sorttable. The way to fix this problem is to use custom sort keys. Take, for example, a column of spelled out numbers. Ordinarily, sorttable wouldn't work here; it will treat the spelled-out numbers as strings, and so would sort the numbers in alphabetical order, ie, five, four, one, three, two. To get around this, you can specify on a cell in your table a sorttable_customkey attribute, and sorttable will use the contents of that attribute instead of the text in the cell itself when sorting the table. So, for example, your table might look like this:
<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>
solution2
0 2015-05-13 14:53:01
# 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
This is the python script which creates the custom key
<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>
This is the HTML that it will fill up
This answer was supplied by a friend of mine, I take no credit in the solution.
It is only posted to help others who may encounter a similar problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Sort Address Column Alphabetically Instead of Numerically With Datatables
Sort table both numerically and alphabetically using Javascript
Javascript sort numerically instead of alphabetically
How do I sort a list alphabetically and numerically in angularjs?
Sort an array of strings alphabetically, numerically then by special characters
Sort column in a table alphabetically within a ul
Jquery table sorting Alphabetically, not sorting numerically
How to sort a javascript array alphabetically with numbers at the end (after letters), and correctly sorting numerically?
How do you alphabetically sort a two column table using raw javascript?
How can I sort a data table numerically with jquery
Related Tags