Требуется доработка кода сортировки таблицы для работы в старом IE
Приветствую уважаемых форумчан!
Требуется доработка кода сортировки таблицы для работы в старом IE, а именно:
<script type="text/javascript">
'use strict';
const theads = document.querySelectorAll(".table_sort thead");
theads.forEach(thead => thead.addEventListener("click", evt => getSort(evt)));
function getSort({ target }) {
const order = target.dataset.order = -(target.dataset.order || -1);
const thList = Array.from(target.parentNode.cells);
const index = thList.indexOf(target);
const collator = new Intl.Collator(["en", "ru"], { numeric: true });
const comparator = (index, order) => (a, b) => {
return (
order *
collator.compare(a.children[index].textContent, b.children[index].textContent));
};
const tablesBodies = Array.from(target.closest("table").tBodies);
tablesBodies.forEach(tBody => {
tBody.append(...Array.from(tBody.rows).sort(comparator(index, order)));
});
thList.forEach(th => th.classList.toggle("sorted", th === target));
}
</script>
Пример кода таблицы: <table style="width:99%" class="table_sort"> <thead> <tr><th>Name</th><th>count1</th><th>count2</th></tr> </thead> <tbody> <tr class="bc"><td>jacques</td><td><b>12</b></td><td>1</td></tr><tr class="bc"><td>mkishimoto</td><td><b>4</b></td><td>5</td></tr><tr class="bc"><td>info</td><td><b>0</b></td><td>2</td></tr><tr class="bc"><td>monika</td><td><b>0</b></td><td>2</td></tr><tr class="bc"><td>sales</td><td><b>0</b></td><td>2</td></tr><tr class="bc"><td>alex</td><td><b>5</b></td><td>0</td></tr><tr class="bc"><td>monika</td><td><b>0</b></td><td>1</td></tr><tr class="bc"><td>bailey</td><td><b>0</b></td><td>1</td></tr><tr class="bc"><td>bansi.v</td><td><b>0</b></td><td>1</td></tr><tr class="bc"><td>dstrupiechowski</td><td><b>2</b></td><td>1</td></tr><tr class="bc"><td>alexx</td><td><b>1</b></td><td>0</td></tr> </tbody> </table> Оплата за выполнение: 50$ PM для связи |
"Старом IE" это каком? 11? 8? ... 6?)
|
Цитата:
|
рони, тут используется Intl.Collator, в данном случае нужен alphanumeric sort алгоритм какой-нить.)
|
Aetae,
может, хватит того алгоритма, что предложен в примере?))) |
Цитата:
|
voraa, не обычное и не только числовое:
collator = new Intl.Collator(["en", "ru"], { numeric: true });
array = [4, 1, 11, 'слово4', 'слово1', 'слово11', 'Вася'];
alert(array.sort() + '\n' + array.sort(collator.compare));
|
Может быть глупость, но в старых версиях IE работает)
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.rawgit.com/Mottie/tablesorter/v2.29.5/js/jquery.tablesorter.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Mottie/tablesorter/v2.29.5/css/theme.blue.css">
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>count1</th>
<th>count2</th>
</tr>
</thead>
<tbody>
<tr>
<td>jacques</td>
<td>12</td>
<td>1</td>
</tr>
<tr>
<td>mkishimoto</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>info</td>
<td>0</td>
<td>2</td>
</tr>
<tr>
<td>monika</td>
<td>0</td>
<td>2</td>
</tr>
<tr>
<td>sales</td>
<td>0</td>
<td>2</td>
</tr>
<tr>
<td>alex</td>
<td>5</td>
<td>0</td>
</tr>
<tr>
<td>monika</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>bailey</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>bansi.v</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>dstrupiechowski</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>alexx</td>
<td>1</td>
<td>0</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$("#myTable").tablesorter();
});
</script>
</body>
</html>
|
sort table for ie
:write: :)
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
table {
border-collapse: collapse;
margin: 20px auto;
}
td,
th {
border: 1px solid #ddd;
padding: 5px;
}
th {
cursor: default;
padding: 6px;
background: #eee;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
function example(a, b) {
if (a == +a && b == +b) return a - b;
if (a == +a) return -1;
if (b == +b) return 1;
a = a.toString().match(/\d+|\D+/g);
b = b.toString().match(/\d+|\D+/g);
var length = Math.min(a.length, b.length);
for (var i = 0; i < length; i++) {
if (a[i] == +a[i] && b[i] == +b[i]) return a[i] - b[i];
if (a[i] == +a[i]) return -1;
if (b[i] == +b[i]) return 1;
if (b[i] > a[i]) return -1;
if (b[i] < a[i]) return 1;
}
return 0;
}
var tables = [].slice.call(document.querySelectorAll(".table_sort"), 0);
tables.forEach(function(tbl) {
var tbody = tbl.querySelector("tbody"),
th = [].slice.call(tbl.querySelectorAll("th"), 0),
tr = [].slice.call(tbody.querySelectorAll("tr"), 0),
td = [].slice.call(tbody.querySelectorAll("td"), 0),
obj = {};
tbl.querySelector("tr:first-child").addEventListener("click", function(e) {
e = e.target || e.srcElement;
if ("TH" == e.tagName) {
e = th.indexOf(e);
e = obj[e] || (obj[e] = td.filter(function(a, i) {
return i == e && (e += th.length);
}).map(function(a, i) {
return [i, a.textContent];
}).sort(function(a, b) {
a = a[1];
b = b[1];
return example(a, b);
}));
var f = document.createDocumentFragment();
e.reverse().forEach(function(a, i) {
f.appendChild(tr[a[0]]);
});
tbody.appendChild(f);
}
});
});
});
</script>
</head>
<body>
<table style="width:99%" class="table_sort">
<thead>
<tr>
<th>Name</th>
<th>count1</th>
<th>count2</th>
</tr>
</thead>
<tbody>
<tr class="bc">
<td>jacques</td>
<td><b>12</b></td>
<td>1</td>
</tr>
<tr class="bc">
<td>mkishimoto</td>
<td><b>4</b></td>
<td>5</td>
</tr>
<tr class="bc">
<td>info</td>
<td><b>0</b></td>
<td>2</td>
</tr>
<tr class="bc">
<td>monika</td>
<td><b>0</b></td>
<td>2</td>
</tr>
<tr class="bc">
<td>sales</td>
<td><b>0</b></td>
<td>2</td>
</tr>
<tr class="bc">
<td>alex</td>
<td><b>5</b></td>
<td>0</td>
</tr>
<tr class="bc">
<td>monika</td>
<td><b>0</b></td>
<td>1</td>
</tr>
<tr class="bc">
<td>bailey</td>
<td><b>0</b></td>
<td>1</td>
</tr>
<tr class="bc">
<td>bansi.v</td>
<td><b>0</b></td>
<td>1</td>
</tr>
<tr class="bc">
<td>dstrupiechowski</td>
<td><b>2</b></td>
<td>1</td>
</tr>
<tr class="bc">
<td>alexx</td>
<td><b>1</b></td>
<td>0</td>
</tr>
</tbody>
</table>
<table class="table_sort">
<thead>
<tr>
<th>Title 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>слово4</td>
</tr>
<tr>
<td>слово1</td>
</tr>
<tr>
<td>слово11</td>
</tr>
<tr>
<td>Вася</td>
</tr>
</tbody>
</table>
</body>
</html>
|
| Часовой пояс GMT +3, время: 02:49. |