ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Сортировка подвижного thead
3 сообщений из 3, страница 1 из 1
Сортировка подвижного thead
    #39238038
Дональд Трамп верстальщик
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Дональд Трамп верстальщик
Гость
Нужна помощь.
Я сделал таблицу с двумя фишками:
1. Сортировка по любому столбцу.
2. Всегда видимый заголовок таблицы (ездит при прокрутке страницы).

Не понимаю почему сортировка по столбцу у меня работает только если я прокрутил страницу и заголовок таблицы сьехал вниз.

Код: 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.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><meta http-equiv="content-type" content="text/html; charset=win-1251">
<style>table, th, td {border-collapse:collapse;border:1px solid black;}th, td {padding:5px;}</style>
 </head><body>

<TABLE class="tableWithFloatingHeader" style="font-size:12;border:3px;border-color:black">

<thead style="border-color:black">
<tr style="background-color:#FFFFFF"><th>col1</th><th>col2</th><th>col3</th><th>col4</th></tr>
</thead>

<tbody>
<tr><td>cell_1_1</td><td>cell_2_1</td><td>cell_3_1</td><td>cell_4_1</td></tr>
<tr><td>cell_1_2</td><td>cell_2_2</td><td>cell_3_2</td><td>cell_4_2</td></tr>
<tr><td>cell_1_3</td><td>cell_2_3</td><td>cell_3_3</td><td>cell_4_3</td></tr>
<tr><td>cell_1_4</td><td>cell_2_4</td><td>cell_3_4</td><td>cell_4_4</td></tr>
<tr><td>cell_1_5</td><td>cell_2_5</td><td>cell_3_5</td><td>cell_4_5</td></tr>
<tr><td>cell_1_6</td><td>cell_2_6</td><td>cell_3_6</td><td>cell_4_6</td></tr>
<tr><td>cell_1_7</td><td>cell_2_7</td><td>cell_3_7</td><td>cell_4_7</td></tr>
<tr><td>cell_1_8</td><td>cell_2_8</td><td>cell_3_8</td><td>cell_4_8</td></tr>
<tr><td>cell_1_9</td><td>cell_2_9</td><td>cell_3_9</td><td>cell_4_9</td></tr>
<tr><td>cell_1_10</td><td>cell_2_10</td><td>cell_3_10</td><td>cell_4_10</td></tr>
<tr><td>cell_1_11</td><td>cell_2_11</td><td>cell_3_11</td><td>cell_4_11</td></tr>
<tr><td>cell_1_12</td><td>cell_2_12</td><td>cell_3_12</td><td>cell_4_12</td></tr>
<tr><td>cell_1_13</td><td>cell_2_13</td><td>cell_3_13</td><td>cell_4_13</td></tr>
<tr><td>cell_1_14</td><td>cell_2_14</td><td>cell_3_14</td><td>cell_4_14</td></tr>
<tr><td>cell_1_15</td><td>cell_2_15</td><td>cell_3_15</td><td>cell_4_15</td></tr>
<tr><td>cell_1_16</td><td>cell_2_16</td><td>cell_3_16</td><td>cell_4_16</td></tr>
<tr><td>cell_1_17</td><td>cell_2_17</td><td>cell_3_17</td><td>cell_4_17</td></tr>
<tr><td>cell_1_18</td><td>cell_2_18</td><td>cell_3_18</td><td>cell_4_18</td></tr>
<tr><td>cell_1_19</td><td>cell_2_19</td><td>cell_3_19</td><td>cell_4_19</td></tr>
<tr><td>cell_1_20</td><td>cell_2_20</td><td>cell_3_20</td><td>cell_4_20</td></tr>
<tr><td>cell_1_21</td><td>cell_2_21</td><td>cell_3_21</td><td>cell_4_21</td></tr>
<tr><td>cell_1_22</td><td>cell_2_22</td><td>cell_3_22</td><td>cell_4_22</td></tr>
<tr><td>cell_1_23</td><td>cell_2_23</td><td>cell_3_23</td><td>cell_4_23</td></tr>
<tr><td>cell_1_24</td><td>cell_2_24</td><td>cell_3_24</td><td>cell_4_24</td></tr>
<tr><td>cell_1_25</td><td>cell_2_25</td><td>cell_3_25</td><td>cell_4_25</td></tr>
<tr><td>cell_1_26</td><td>cell_2_26</td><td>cell_3_26</td><td>cell_4_26</td></tr>
<tr><td>cell_1_27</td><td>cell_2_27</td><td>cell_3_27</td><td>cell_4_27</td></tr>
<tr><td>cell_1_28</td><td>cell_2_28</td><td>cell_3_28</td><td>cell_4_28</td></tr>
<tr><td>cell_1_29</td><td>cell_2_29</td><td>cell_3_29</td><td>cell_4_29</td></tr>
<tr><td>cell_1_30</td><td>cell_2_30</td><td>cell_3_30</td><td>cell_4_30</td></tr>
<tr><td>cell_1_31</td><td>cell_2_31</td><td>cell_3_31</td><td>cell_4_31</td></tr>
<tr><td>cell_1_32</td><td>cell_2_32</td><td>cell_3_32</td><td>cell_4_32</td></tr>
<tr><td>cell_1_33</td><td>cell_2_33</td><td>cell_3_33</td><td>cell_4_33</td></tr>
<tr><td>cell_1_34</td><td>cell_2_34</td><td>cell_3_34</td><td>cell_4_34</td></tr>
<tr><td>cell_1_35</td><td>cell_2_35</td><td>cell_3_35</td><td>cell_4_35</td></tr>
<tr><td>cell_1_36</td><td>cell_2_36</td><td>cell_3_36</td><td>cell_4_36</td></tr>
<tr><td>cell_1_37</td><td>cell_2_37</td><td>cell_3_37</td><td>cell_4_37</td></tr>
<tr><td>cell_1_38</td><td>cell_2_38</td><td>cell_3_38</td><td>cell_4_38</td></tr>
<tr><td>cell_1_39</td><td>cell_2_39</td><td>cell_3_39</td><td>cell_4_39</td></tr>
<tr><td>cell_1_40</td><td>cell_2_40</td><td>cell_3_40</td><td>cell_4_40</td></tr>
<tr><td>cell_1_41</td><td>cell_2_41</td><td>cell_3_41</td><td>cell_4_41</td></tr>
<tr><td>cell_1_42</td><td>cell_2_42</td><td>cell_3_42</td><td>cell_4_42</td></tr>
<tr><td>cell_1_43</td><td>cell_2_43</td><td>cell_3_43</td><td>cell_4_43</td></tr>
<tr><td>cell_1_44</td><td>cell_2_44</td><td>cell_3_44</td><td>cell_4_44</td></tr>
<tr><td>cell_1_45</td><td>cell_2_45</td><td>cell_3_45</td><td>cell_4_45</td></tr>
<tr><td>cell_1_46</td><td>cell_2_46</td><td>cell_3_46</td><td>cell_4_46</td></tr>
<tr><td>cell_1_47</td><td>cell_2_47</td><td>cell_3_47</td><td>cell_4_47</td></tr>
<tr><td>cell_1_48</td><td>cell_2_48</td><td>cell_3_48</td><td>cell_4_48</td></tr>
<tr><td>cell_1_49</td><td>cell_2_49</td><td>cell_3_49</td><td>cell_4_49</td></tr>
<tr><td>cell_1_50</td><td>cell_2_50</td><td>cell_3_50</td><td>cell_4_50</td></tr>
</tbody>

</table>

<script type="text/javascript" src="./test_table_files/jquery.min.js"></script>
<script type="text/javascript">

        
function sortTable(table, col, reverse) {
    var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
        tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
        i;
    reverse = -((+reverse) || -1);


    console.log("sorting column:"+col)
    tr = tr.sort(

    
        function (a, b) { // sort rows
            return reverse // `-1 *` if want opposite order
                * (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
                    .localeCompare(b.cells[col].textContent.trim())
                   );
        }
     
       
    );
    for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}

//------------------------------------------------------

function makeSortable(table) {
    var th = table.tHead, i;
    th && (th = th.rows[0]) && (th = th.cells);
    if (th) i = th.length;
    else return; // if no `<thead>` then do nothing
    while (--i >= 0) (function (i) {
        var dir = 1;
        th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))});
    }(i));
}

//------------------------------------------------------

function makeAllSortable(parent) {
    parent = parent || document.body;
    var t = parent.getElementsByTagName('TABLE'), i = t.length;
    while (--i >= 0) makeSortable(t[i]);
}

//------------------------------------------------------

function UpdateTableHeaders() {
            $("div.divTableWithFloatingHeader").each(function() {
                var originalHeaderRow = $(".tableFloatingHeaderOriginal", this);
                var floatingHeaderRow = $(".tableFloatingHeader", this);
                var offset = $(this).offset();
                var scrollTop = $(window).scrollTop();
                if ((scrollTop > offset.top) && (scrollTop < offset.top + $(this).height())) {
                    floatingHeaderRow.css("visibility", "visible");
                    floatingHeaderRow.css("top", Math.min(scrollTop - offset.top, $(this).height() - floatingHeaderRow.height()) + "px");

                    // Copy cell widths from original header
                    $("th", floatingHeaderRow).each(function(index) {
                        var cellWidth = $("th", originalHeaderRow).eq(index).css('width');
                       // for automatic width of cell while resizing main hmtl
                       //var cellWidth = $("th", originalHeaderRow).eq(index).outerWidth(true);
                        $(this).css('width', cellWidth);
                    });

                    // Copy row width from whole table
                    floatingHeaderRow.css("width", $(this).css("width"));
                }
                else {
                    floatingHeaderRow.css("visibility", "hidden");
                    floatingHeaderRow.css("top", "0px");
                }
            });
        }

        $(document).ready(function() {
            $("table.tableWithFloatingHeader").each(function() {
                $(this).wrap("<div class=\"divTableWithFloatingHeader\" style=\"position:relative\"></div>");

                var originalHeaderRow = $("tr:first", this)
                originalHeaderRow.before(originalHeaderRow.clone());
                var clonedHeaderRow = $("tr:first", this)

                clonedHeaderRow.addClass("tableFloatingHeader");
                clonedHeaderRow.css("position", "absolute");
                clonedHeaderRow.css("top", "0px");
                clonedHeaderRow.css("left", $(this).css("margin-left"));
                clonedHeaderRow.css("left", "0px");
                clonedHeaderRow.css("visibility", "hidden");

                originalHeaderRow.addClass("tableFloatingHeaderOriginal");
            });
            UpdateTableHeaders();
            $(window).scroll(UpdateTableHeaders);
            $(window).resize(UpdateTableHeaders);
            makeAllSortable();

        });
        
//------------------------------------------------------

window.onload = function () {makeAllSortable();};

</script>

</body></html>
...
Рейтинг: 0 / 0
18.05.2016, 11:14
| Ответить | Цитировать | Написать  
Сортировка подвижного thead
    #39238137
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
автор2. Всегда видимый заголовок таблицы (ездит при прокрутке страницы).
лучше прокручивать тело таблицы, а не всю страницу
...
Рейтинг: 0 / 0
18.05.2016, 12:10
| Ответить | Цитировать | Написать  
Сортировка подвижного thead
    #39238154
Дональд Трамп верстальщик
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Дональд Трамп верстальщик
Гость
вадяавтор2. Всегда видимый заголовок таблицы (ездит при прокрутке страницы).
лучше прокручивать тело таблицы, а не всю страницу
Мне это не подходит. Мне нужен именно ездищий заголовок таблицы
...
Рейтинг: 0 / 0
18.05.2016, 12:33
| Ответить | Цитировать | Написать  
3 сообщений из 3, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Сортировка подвижного thead
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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