Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Постраничная навигация таблицы

Автор: serezhka1986 14.8.2012, 16:28

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

Код


<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:55

Пробовал сделать что-то такое:

Код


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>

Автор: ksnk 14.8.2012, 17:25

Код


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>

Автор: serezhka1986 14.8.2012, 17:44

У меня почему-то долго код работает. Тот, что я выше писал сразу перекидывал, а тут задержка какая-то получается. И при переходе пропадает несколько элементов с разметки сайта. smile

Автор: ksnk 14.8.2012, 18:26

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

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

Автор: serezhka1986 14.8.2012, 18:43

Цитата(ksnk @ 14.8.2012, 18:26

)

Код, который долго работает можно выложить на http://jsfiddle.net/ и там посмотреть. Без кода мало что получится.Кстати, id должен быть уникальным на страничке, так что id="resulttable" лучше вписать один раз в тег table, а не в каждую строку

Спасибо, попробую! Но немогу понять почему при первом же переходе на какую-нибудь ссылку навигации у меня скрываются вообще все таблицы, которые есть на сайте...

Автор: ksnk 14.8.2012, 18:55

если

Цитата

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

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

Автор: serezhka1986 14.8.2012, 22:45

Цитата(ksnk @ 14.8.2012, 18:55

)

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

Спасибо большое! Все отлично работает. + к репутации!!! smile