Сортировка в столбцах таблицы
Здравствуйте!
Сделал сортировку в таблице по столбцам. Сортировка должна выполняться не по содержимому, а только по классу (но не по имени класса). Классов может быть несколько. Что не устроило меня, так это скорость выполнения. Моя таблица, где около 40 строк и 7 столбцов "сортируется" порядка 5 секунд. Помогите, пожалуйста, оптимизировать. Код здесь |
vkhacker,
1 строка я так понял в сортировке не учавствует , в данном варианте с небольшим дополнением можно все классы для сортировки задать одновременно.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{font-size: 20pt;}
table{
margin:0;
padding:0;
border:1px solid #888;
}
td.nd{
color:#0f0;
}
td.nd2{
color:#f00;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
jQuery.fn.tdData = function(td_class) {
return this.each(function() {
var cls = this.className.split(/\s+/),
sum = 0;
for (var i = 0; i < cls.length; i++) sum += cls[i] == td_class ? 1 : 0;
$(this).data({
"cls": sum
})
})
};
function DownCell(table, td_class) {
var row = table.find("tr:gt(0)");
var colcount = row[0].cells.length;
$("td", row).tdData(td_class);
for (var col = 0; col < colcount; col++) {
var cell = row.find("td:nth-child(1)");
var arr = $.makeArray(cell);
arr.sort(function(a, b) {
return $(a).data("cls") - $(b).data("cls")
});
row.each(function(indx, element) {
this.appendChild(arr[indx])
})
}
return false
}
setTimeout(function() {
DownCell($("table.tbl"), "nd");
DownCell($("table.tbl"), "nd2")
}, 2E3)
});
</script>
</head>
<body>
<table class="tbl" cellspacing="0" cellpadding="0" border="1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td class="nd2">13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td class="nd2">17</td>
</tr>
<tr>
<td class="nd2">21</td>
<td class="nd">22</td>
<td>23</td>
<td class="nd">24</td>
<td>25</td>
<td class="nd2">26</td>
<td>27</td>
</tr>
<tr>
<td>31</td>
<td class="nd2">32</td>
<td class="nd">33</td>
<td>34</td>
<td>35</td>
<td class="nd2">36</td>
<td>37</td>
</tr>
</table>
</body>
</html>
|
vkhacker,
Вариант сортировки по всем классам сразу
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{font-size: 20pt;}
table{
margin:0;
padding:0;
border:1px solid #888;
}
td.nd{
color:#0f0;
}
td.nd2{
color:#f00;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
jQuery.fn.tdData = function(td_class) {
return this.each(function() {
var cls = this.className.split(/\s+/),
sum = 0;
for (var i = 0; i < cls.length; i++) sum += td_class[cls[i]] ? td_class[cls[i]] : 0;
$(this).data({
"cls": sum
})
})
};
function DownCell(table, td_class) {
var row = table.find("tr:gt(0)");
var colcount = row[0].cells.length;
$("td", row).tdData(td_class);
for (var col = 0; col < colcount; col++) {
var cell = row.find("td:nth-child(1)");
var arr = $.makeArray(cell);
arr.sort(function(a, b) {
return $(a).data("cls") - $(b).data("cls")
});
row.each(function(indx, element) {
this.appendChild(arr[indx])
})
}
return false
}
DownCell($("table.tbl"), {"nd" : 1, "nd2" : 2});
});
</script>
</head>
<body>
<table class="tbl" cellspacing="0" cellpadding="0" border="1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td class="nd2">13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td class="nd2">17</td>
</tr>
<tr>
<td class="nd2">21</td>
<td class="nd">22</td>
<td>23</td>
<td class="nd">24</td>
<td>25</td>
<td class="nd2">26</td>
<td>27</td>
</tr>
<tr>
<td>31</td>
<td class="nd2">32</td>
<td class="nd">33</td>
<td>34</td>
<td>35</td>
<td class="nd2">36</td>
<td>37</td>
</tr>
</table>
</body>
</html>
|
Спасибо! То, что нужно!
|
рони,
почему-то в Google Chrome другой результат Ссылка на код Решил проблему следующим образом:
arr.sort(function(a, b) {
var res = $(a).data("cls") - $(b).data("cls");
if (res==0){
if ($(a).text() > $(b).text()) return 1;
if ($(a).text() < $(b).text()) return -1;
return 0;
}
else
return res;
});
Результат Работает в случае, если требуется сортировка содержимого текста по алфавиту. |
vkhacker,
Google так оптимизировал сортировку - http://jsfiddle.net/9gugafop/2/ строка 27 добавлена сортировка по содержимому |
| Часовой пояс GMT +3, время: 10:56. |