Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.03.2015, 14:57
Новичок на форуме
Отправить личное сообщение для vkhacker Посмотреть профиль Найти все сообщения от vkhacker
 
Регистрация: 03.03.2015
Сообщений: 3

Сортировка в столбцах таблицы
Здравствуйте!
Сделал сортировку в таблице по столбцам. Сортировка должна выполняться не по содержимому, а только по классу (но не по имени класса). Классов может быть несколько.
Что не устроило меня, так это скорость выполнения. Моя таблица, где около 40 строк и 7 столбцов "сортируется" порядка 5 секунд. Помогите, пожалуйста, оптимизировать.

Код здесь
Ответить с цитированием
  #2 (permalink)  
Старый 03.03.2015, 16:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

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>
Ответить с цитированием
  #3 (permalink)  
Старый 03.03.2015, 16:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

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>
Ответить с цитированием
  #4 (permalink)  
Старый 04.03.2015, 08:21
Новичок на форуме
Отправить личное сообщение для vkhacker Посмотреть профиль Найти все сообщения от vkhacker
 
Регистрация: 03.03.2015
Сообщений: 3

Спасибо! То, что нужно!
Ответить с цитированием
  #5 (permalink)  
Старый 06.03.2015, 08:57
Новичок на форуме
Отправить личное сообщение для vkhacker Посмотреть профиль Найти все сообщения от vkhacker
 
Регистрация: 03.03.2015
Сообщений: 3

рони,
почему-то в 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, 06.03.2015 в 11:01.
Ответить с цитированием
  #6 (permalink)  
Старый 06.03.2015, 11:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

vkhacker,
Google так оптимизировал сортировку -
http://jsfiddle.net/9gugafop/2/
строка 27 добавлена сортировка по содержимому
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сортировка таблицы по алфавиту dozer Events/DOM/Window 6 18.10.2014 00:22
Средне арифметическое в двух столбцах таблицы deespe11 Элементы интерфейса 9 09.02.2013 17:40
Сортировка таблицы (даты) edmundantes Элементы интерфейса 4 17.05.2012 09:51
Сортировка таблицы, ячейки которой содержат теги stos Events/DOM/Window 9 05.05.2012 02:21
Сортировка таблицы, при помощи js Prizrak177 Общие вопросы Javascript 10 02.09.2010 12:17