Как отсортировать столбец таблицы по номерам и алфавиту?
Я использовал sorttable для сортировки таблиц на моей веб-странице, и это работает по большей части, моя единственная проблема в том, что я пытаюсь сортировать серверы, которые содержат буквы и цифры. Сортировка по алфавиту выглядела как лучший вариант, но это приводило к небольшой проблеме, когда я достигал значения> 100.
Вывод будет читать 1,2,3,4,5,6,7,8,9,10,100,101,11,12,13,14,15,...,99
Конечно, было бы намного лучше, если бы я мог получить это с 100 после 99, поэтому я изменил этот столбец, чтобы отсортировать его численно, и это работало по большей части. Моя последняя проблема заключается в том, что теперь у меня есть серверы с похожими именами, отделенные друг от друга, например: testServer1, Server1, testServer2, Server2,.... testServer99, Server99
Изображения выхода:
Как вы можете видеть, особенно слева, именованные хосты не связаны друг с другом, так как по номерам они сортируются.
Ссылки на sorttable.js:
http://www.kryogenix.org/code/browser/sorttable/sorttable.js http://www.kryogenix.org/code/browser/sorttable/
Демонстрация слишком длинная, вот она 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>™<br>
© ----
</p>
<script>
var sortHyper = document.getElementById("hypervisorTable");
var sortHost = document.getElementById("hostTable");
sorttable.makeSortable(sortHyper);
sorttable.makeSortable(sortHost);
</script>
</body>
2 ответа
Решение
Ответ был доступен по ссылке, которой вы поделились
Использование пользовательских ключей сортировки
У вас могут быть данные, которые идут в порядке, но не идентифицируются сортируемыми. Чтобы решить эту проблему, используйте пользовательские ключи сортировки. Взять, к примеру, столбец прописанных чисел. Обычно, 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>
# 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, который он заполнит
Этот ответ был предоставлен моим другом, я не принимаю кредит в решении.
Он публикуется только для того, чтобы помочь другим, кто может столкнуться с подобной проблемой.