Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Постраничная навигация таблицы 
:(
    Опции темы
serezhka1986
Дата 14.8.2012, 16:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 215
Регистрация: 12.6.2009

Репутация: нет
Всего: 0
Добрый день!
Подскажите, пожалуйста, решение такой задачи. Есть таблица вида:
Код

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr id="resulttable" class="page1">
    <td>900</td>
    <td>00:15:30</td>
    <td>Название 1</td>
  </tr>
  <tr id="resulttable" class="page1">
    <td>800</td>
    <td>00:13:18</td>
    <td>Название 2</td>
  </tr>
  <tr id="resulttable" class="page2">
    <td>850</td>
    <td>00:24:16</td>
    <td>Название 3</td>
  </tr>
  <tr id="resulttable" class="page2">
    <td>902</td>
    <td>00:17:35</td>
    <td>Название 4</td>
  </tr>
  <tr id="resulttable" class="page3">
    <td>380</td>
    <td>01:15:00</td>
    <td>Название 5</td>
  </tr>
  <tr id="resulttable" class="page3">
    <td>560</td>
    <td>00:35:55</td>
    <td>Название 6</td>
  </tr>
</table>

Под таблицей есть такие ссылки:
Код

<p>| <a style="cursor:pointer;" onclick="navigpage(1)">1</a> | 
<a style="cursor:pointer;" onclick="navigpage(2)">2</a> | 
<a style="cursor:pointer;" onclick="navigpage(3)">3</a> |</p>

Каким образом можно реализовать постраничную навигацию. Например, нажимаем ссилку 2 и у нас показываются только строки с классом page2, и при этом сама ссылка 2 меняет цвет (например на красный). Если можно, скиньте пример.  smile 

Это сообщение отредактировал(а) serezhka1986 - 14.8.2012, 16:29
--------------------
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть жопой на клавиатуру... 
PM   Вверх
serezhka1986
Дата 14.8.2012, 16:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 215
Регистрация: 12.6.2009

Репутация: нет
Всего: 0
Пробовал сделать что-то такое:
Код

function navigpage(page) {
    $('tr#resulttable').css("display", "none");
    $('tr.page'+page).css("display", "");
}

Вроде работает. Но как менять цвет ссылки активной страницы?

Добавлено @ 17:01
И как перейти на следующую страницу, если к списку ссилык добавить навигацию типа "Вперед/Назад":
Код

<p><a style="cursor:pointer;" onclick="navigpage()">&laquo;</a> | <a style="cursor:pointer;" onclick="navigpage(1)">1</a> | 
<a style="cursor:pointer;" onclick="navigpage(2)">2</a> | 
<a style="cursor:pointer;" onclick="navigpage(3)">3</a> | <a style="cursor:pointer;" onclick="navigpage()">&raquo;</a></p>


Это сообщение отредактировал(а) serezhka1986 - 14.8.2012, 17:04
--------------------
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть жопой на клавиатуру... 
PM   Вверх
ksnk
Дата 14.8.2012, 17:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
Код

function navigpage(x) {
  if(x=='prev' && navigpage.current_page>1)
    x=navigpage.current_page -1;
  else if(x=='next')
    x=navigpage.current_page +1;
  if(typeof(x)!='number')
    return ;
  navigpage.current_page = x;
  $('table tr').filter('.page'+x+':hidden').show().end().not('.page'+x+':visible').hide();
  return false;
}
navigpage.current_page= 1;


Код

<p>|
<a style="cursor:pointer;" onclick="return navigpage('prev')">&le;</a> | 
<a style="cursor:pointer;" onclick="return navigpage(1)">1</a> | 
<a style="cursor:pointer;" onclick="return navigpage(2)">2</a> | 
<a style="cursor:pointer;" onclick="return navigpage(3)">3</a> |
<a style="cursor:pointer;" onclick="return navigpage('next')">&gt;</a> |
</p>



--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
serezhka1986
Дата 14.8.2012, 17:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 215
Регистрация: 12.6.2009

Репутация: нет
Всего: 0
У меня почему-то долго код работает. Тот, что я выше писал сразу перекидывал, а тут задержка какая-то получается. И при переходе пропадает несколько элементов с разметки сайта.  smile 
--------------------
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть жопой на клавиатуру... 
PM   Вверх
ksnk
Дата 14.8.2012, 18:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
Код, который долго работает можно выложить на http://jsfiddle.net/ и там посмотреть. Без кода мало что получится.

Кстати, id должен быть уникальным на страничке, так что 
id="resulttable" лучше вписать один раз в тег table, а не в каждую строку


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
serezhka1986
Дата 14.8.2012, 18:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 215
Регистрация: 12.6.2009

Репутация: нет
Всего: 0
Цитата(ksnk @  14.8.2012,  18:26 Найти цитируемый пост)
Код, который долго работает можно выложить на http://jsfiddle.net/ и там посмотреть. Без кода мало что получится.Кстати, id должен быть уникальным на страничке, так что id="resulttable" лучше вписать один раз в тег table, а не в каждую строку

Спасибо, попробую! Но немогу понять почему при первом же переходе на какую-нибудь ссылку навигации у меня скрываются вообще все таблицы, которые есть на сайте... 
--------------------
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть жопой на клавиатуру... 
PM   Вверх
ksnk
Дата 14.8.2012, 18:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386
если 
Цитата

id="resulttable" ... вписать один раз в тег table

, то в моей функции navigpage нужно поправить 
$('table tr') на $('#resulttable tr') тогда скрываться будут не все таблицы на сайте, а только та, которая нужна.


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
serezhka1986
Дата 14.8.2012, 22:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 215
Регистрация: 12.6.2009

Репутация: нет
Всего: 0
Цитата(ksnk @  14.8.2012,  18:55 Найти цитируемый пост)
$('table tr') на $('#resulttable tr') тогда скрываться будут не все таблицы на сайте, а только та, которая нужна.

Спасибо большое! Все отлично работает. + к репутации!!!  smile 
--------------------
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть жопой на клавиатуру... 
PM   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0460 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.