ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [jquery] отсортировать таблицу на клиенте методом быстрой сортировки
9 сообщений из 9, страница 1 из 1
[jquery] отсортировать таблицу на клиенте методом быстрой сортировки
    #39107369
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
Доброго всем дня, господа, давно не виделись :-)

Внезапно захотелось отсортировать таблицу на клиенте методом быстрой сортировки. Родила примерно следующий код:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function sortTable()
{
    var trs = $("#myTable tr");
    var newOrder = quickSort(trs);
    newOrder.attr({style:"color:red"});
}

function quickSort(A)
{
    if (A.size() == 0) return $([]);
    var a=$([]), b=$([]);
    for (var i=1; i<A.size(); i++)
    {
	if ( A.eq(i).find("td:nth-child(2)").text() < A.eq(0).find("td:nth-child(2)").text() ) 
	        a.add(A.eq(i));
	else   b.add(A.eq(i));
    }
    return quickSort(a).add(A.eq(0)).add(quickSort(b));
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tbody>
<tr><td>qwerty1</td><td>5</td></tr>
<tr><td>qwerty2</td><td>7</td></tr>
<tr><td>qwerty3</td><td>3</td></tr>
<tr><td>qwerty4</td><td>4</td></tr>
<tr><td>qwerty5</td><td>9</td></tr>
</tbody>
</table>
<input type="button" value="test" onclick="sortTable()" />
</body>
</html>


но [неожиданно] оказалось, что, несмотря на то, что условие A.eq(i).find("td:nth-child(2)").text() < A.eq(0).find("td:nth-child(2)").text() отрабатывает по-честному, оба вспомогательных набора a и b так и остаются пустыми, и в итоге на выходе функции остается одна лишь первая строка таблицы, использующаяся на первом этапе рекурсии в качестве опорной. Вопрос: какого лешего не срабатывают a.add(A.eq(i)) и b.add(A.eq(i)), и что надо сделать, чтобы на выходе таки получить отсортированный набор строк?

П.С.
1) нет, готового подходящего плагина для сортировки не нашла, потому что реальная таблица очень длинная, многоуровневая, с колспанами и роуспанами;
2) нет, сортировать на сервере не вариант, это намного дороже.
...
Рейтинг: 0 / 0
19.11.2015, 09:03
| Ответить | Цитировать | Написать  
[jquery] отсортировать таблицу на клиенте методом быстрой сортировки
    #39107693
kunaksergey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
kunaksergey
Гость
illion,
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function sortTable()
{
    var itm = $("#myTable tr");
    A=quickSort(itm,0,itm.length-1);
    $("#myTable").append(A);
    itm.attr({style:"color:red"});
 }  
   

	function quickSort(A,left,right){
	var i, j, х, у;
	i=left;j=right;
	x=A.eq((left+right)%2);
	 do {
			while((A.eq(i).find("td:nth-child(2)").text()<x.find("td:nth-child(2)").text()) && (i<right)) i++;

			while((x.find("td:nth-child(2)").text()<A.eq(j).find("td:nth-child(2)").text()) && (j>left)) j--;
	if (i <= j){
	у = A[i];
	A[i] = A[j];
	A[j] = у;
	i++; j--;
	}
	}while ( i <= j);
		if(left < j) quickSort(A, left, j);
		if(i < right) quickSort(A, i, right);
		return A;
	}

</script>
</head>
<body>
<table id="myTable" border="1">
<tbody>
<tr><td>qwerty1</td><td>5</td></tr>
<tr><td>qwerty4</td><td>7</td></tr>
<tr><td>qwerty3</td><td>3</td></tr>
<tr><td>qwerty3</td><td>2</td></tr>
<tr><td>qwerty4</td><td>4</td></tr>
<tr><td>qwerty5</td><td>9</td></tr>
<tr><td>qwerty6</td><td>9</td></tr>
</tbody>
</table>
<input type="button" value="test" onclick="sortTable()" />
</body>
</html>
...
Рейтинг: 0 / 0
19.11.2015, 13:28
| Ответить | Цитировать | Написать  
[jquery] отсортировать таблицу на клиенте методом быстрой сортировки
    #39108200
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
illion,

что-то ты намудрила )

скажу по секрету (только никому не говори), что метод быстрой сортировки уже сделан для массива. Времена нынче такие - всё сговнокодено до нас ))

 
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html><head>
<script>
function sortTable()
{
    var tbody = document.querySelector("#myTable>tbody");
    quickSort(tbody, function(a, b) {
        var v1 = parseInt(a.lastChild.innerHTML, 10),
            v2 = parseInt(b.lastChild.innerHTML, 10);
        return v1 - v2;
    });
}

function quickSort(tbody, cmp)
{
    var trs = tbody.querySelectorAll(':scope>tr');
    var arr = Array.prototype.slice.call(trs, 0);
    arr.sort(cmp); // быстрая сортировка :)
    for (var i = arr.length - 1; i >= 0; --i) {
        if (arr[i] != tbody.firstChild) {
            tbody.insertBefore(arr[i], tbody.firstChild);
        }
    }
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tbody>
<tr><td>qwerty1</td><td>5</td></tr>
<tr><td>qwerty2</td><td>7</td></tr>
<tr><td>qwerty3</td><td>3</td></tr>
<tr><td>qwerty4</td><td>4</td></tr>
<tr><td>qwerty5</td><td>9</td></tr>
</tbody>
</table>
<input type="button" value="test" onclick="sortTable()" />
</body>
</html>



про сортировку таблицы с роуспанами я, конечно, не совсем понимаю, как делать. Там по ситуации. Но принцип тот же.
...
Рейтинг: 0 / 0
19.11.2015, 19:24
| Ответить | Цитировать | Написать  
[jquery] отсортировать таблицу на клиенте методом быстрой сортировки
    #39108505
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
kunaksergey,

а что это за алгоритм?

П.С. кстати, итог - 2,3,4,7,5,9,9
...
Рейтинг: 0 / 0
20.11.2015, 08:17
| Ответить | Цитировать | Написать  
[jquery] отсортировать таблицу на клиенте методом быстрой сортировки
    #39108514
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
Яростный Мечвсё сговнокодено до нас ))

собсна, на это я и понадеялась, взяв готовый код (рабочий) и попытавшись перевести его с массивов на наборы jquery.
 
исходный вариант
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
function quicksort(A)
{
    if (A.length == 0) return [];
    var a=[], b=[], p=A[0];
    for (var i=1; i<A.length; i++)
    {
	if ( A[i] < p ) a[a.length]= A[i];
	else b[b.length]= A[i];
    }
    return quicksort(a).concat(p, quicksort(b));
}
var qw = [5,7,3,2,4,9,9];
alert(qw+' => '+quicksort(qw));


но почему-то a.add(A.eq(i)) не срабатывает, хоть убейся. Почему?
...
Рейтинг: 0 / 0
20.11.2015, 08:28
| Ответить | Цитировать | Написать  
[jquery] отсортировать таблицу на клиенте методом быстрой сортировки
    #39108584
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
Яростный Мечпро сортировку таблицы с роуспанами я, конечно, не совсем понимаю, как делать. Там по ситуации. Но принцип тот же.
вот с точки зрения роуспанов мне и хотелось сначала получить отсортированный набор, а потом только строки на странице менять местами. Приблизительно хотелось сделать так:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>

function sortTable()
{
    var trs = $("#myTable tr").filter(function(){return $('td',this).length ==3;});
    var newOrder = quickSort(trs);
    for (var i=0; i<newOrder.length; i++)
    {
	var currentGroup = newOrder.eq(i).attr('groupNumber');
	$("#myTable tbody").append($("[groupNumber="+currentGroup+"]"));
    }
}

function quickSort(A)
{
    if (A.length == 0) return $([]);
    var a=$([]), b=$([]);
    for (var i=1; i<A.length; i++)
    {
	if ( A.eq(i).find("td:nth-child(2)").text() < A.eq(0).find("td:nth-child(2)").text() ) 
		a.add(A.eq(i));
	else    b.add(A.eq(i));
    }
    return quickSort(a).add(A.eq(0)).add(quickSort(b));
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tbody>
<tr groupNumber="group1"><td rowspan="2">qwert1</td><td rowspan="2">12</td><td>5</td></tr>
<tr groupNumber="group1"><td>7</td></tr>
<tr groupNumber="group2"><td rowspan="2">qwert2</td><td rowspan="2">5</td><td>3</td></tr>
<tr groupNumber="group2"><td>2</td></tr>
<tr groupNumber="group3"><td rowspan="2">qwert3</td><td rowspan="2">13</td><td>4</td></tr>
<tr groupNumber="group3"><td>9</td></tr>
<tr groupNumber="group4"><td>qwert4</td><td>9</td><td>9</td></tr>
</tbody>
</table>
<input type="button" value="test" onclick="sortTable()" />
</body>
</html>
...
Рейтинг: 0 / 0
20.11.2015, 09:58
| Ответить | Цитировать | Написать  
[jquery] отсортировать таблицу на клиенте методом быстрой сортировки
    #39108589
kunaksergey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
kunaksergey
Гость
illion,
Это есть метод быстрой сортировки.. Немного подправил код:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function sortTable()
{
    var itm = $("#myTable tr");
    quickSort(0,itm.length-1);
    $("#myTable").append(itm);
    itm.attr({style:"color:red"});
 
	function quickSort(left,right){
	var i, j,у;
	if (left >= right){

            return;
        }
	i=left;j=right;
	cur=parseInt(i - (i - j) / 2);
	 while (i < j) {

			while(i<cur && Number(itm.eq(i).find("td:nth-child(2)").text())
				<=
				  Number(itm.eq(cur).find("td:nth-child(2)").text()) )
				   i++;

			while( j>cur && Number(itm.eq(cur).find("td:nth-child(2)").text())<=
				  Number(itm.eq(j).find("td:nth-child(2)").text()) ) 
				j--;
		if (i < j){
		у = itm[i];
		itm[i] = itm[j];
		itm[j] = у;
			if (i == cur)
		          cur = j;
		    else if (j == cur)
		          cur = i;
		}
	}
	quickSort(left, cur);
    quickSort(cur+1, right);
	}
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tbody>
<tr><td>qwerty1</td><td>5</td></tr>
<tr><td>qwerty4</td><td>7</td></tr>
<tr><td>qwerty3</td><td>3</td></tr>
<tr><td>qwerty3</td><td>2</td></tr>
<tr><td>qwerty4</td><td>4</td></tr>
<tr><td>qwerty5</td><td>9</td></tr>
<tr><td>qwerty6</td><td>9</td></tr>
</tbody>
</table>
<input type="button" value="test" onclick="sortTable()" />
</body>
</html>
...
Рейтинг: 0 / 0
20.11.2015, 10:04
| Ответить | Цитировать | Написать  
[jquery] отсортировать таблицу на клиенте методом быстрой сортировки
    #39108847
kunaksergey
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
kunaksergey
Гость
А вот твой вариант:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function sortTable()
{
    var trs = $("#myTable tr");
    var newOrder = quickSort(trs);
    $("#myTable").append(newOrder);
    trs.attr({style:"color:red"});
  }  

function quickSort(A)
{
   if (A.size() == 0) return $([]);
    var a=$([]), b=$([]);
    for (var i=1; i<A.size(); i++)
    {
       if ( A.eq(i).find("td:nth-child(2)").text() < A.eq(0).find("td:nth-child(2)").text() ) 
              $.merge(a,A.eq(i));
        else   $.merge(b,A.eq(i));
    }
      return $.merge($.merge(quickSort(a),A.eq(0)),quickSort(b));
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tbody>
<tr><td>qwerty1</td><td>5</td></tr>
<tr><td>qwerty2</td><td>7</td></tr>
<tr><td>qwerty3</td><td>3</td></tr>
<tr><td>qwerty4</td><td>4</td></tr>
<tr><td>qwerty5</td><td>9</td></tr>
</tbody>
</table>
<input type="button" value="test" onclick="sortTable()" />
</body>
</html>
...
Рейтинг: 0 / 0
20.11.2015, 12:35
| Ответить | Цитировать | Написать  
[jquery] отсортировать таблицу на клиенте методом быстрой сортировки
    #39110535
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
kunaksergeyА вот твой вариант:

О! супер :-) . Не знала о методе merge, спасибо. Пришлось еще преобразование Number() добавить, почему-то в таком варианте перестало работать автоматическое. Метод add так и остался для меня загадкой, увы.

 
Конечный вариант с роуспанами
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>

function sortTable()
{
    var trs = $("#myTable tr").filter(function(){return $('td',this).length ==3;});
    var newOrder = quickSort(trs);
    for (var i=0; i<newOrder.length; i++)
    {
	var currentGroup = newOrder.eq(i).attr('groupNumber');
	$("#myTable tbody").append($("[groupNumber="+currentGroup+"]"));
    }
}

function quickSort(A)
{
    if (A.size() == 0) return $([]);
    var a=$([]), b=$([]);
    for (var i=1; i<A.size(); i++)
    {
       if ( Number(A.eq(i).find("td:nth-child(2)").text()) < Number(A.eq(0).find("td:nth-child(2)").text()) ) 
              $.merge(a,A.eq(i));
        else   $.merge(b,A.eq(i));
    }
    return $.merge($.merge(quickSort(a),A.eq(0)),quickSort(b));
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tbody>
<tr groupNumber="group1"><td rowspan="2">qwert1</td><td rowspan="2">12</td><td>5</td></tr>
<tr groupNumber="group1"><td>7</td></tr>
<tr groupNumber="group2"><td rowspan="2">qwert2</td><td rowspan="2">5</td><td>3</td></tr>
<tr groupNumber="group2"><td>2</td></tr>
<tr groupNumber="group3"><td rowspan="2">qwert3</td><td rowspan="2">13</td><td>4</td></tr>
<tr groupNumber="group3"><td>9</td></tr>
<tr groupNumber="group4"><td>qwert4</td><td>9</td><td>9</td></tr>
</tbody>
</table>
<input type="button" value="test" onclick="sortTable()" />
</body>
</html>

...
Рейтинг: 0 / 0
23.11.2015, 02:45
| Ответить | Цитировать | Написать  
9 сообщений из 9, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [jquery] отсортировать таблицу на клиенте методом быстрой сортировки
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=39107369&tid=1445619]:
 0ms
get settings:
 6ms
get forum list:
 18ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 156ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 64ms
get tp. blocked users:
 1ms
others: 209ms
total:  474ms
созд. / загр.: 474ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]