Как не скрывать первую строку таблицы при пролистывании?

Question

[Сергей]

Вот код js на разбитие таблицы на страницы:

$(document).ready(function(){
    $('#data').after('<div id="nav"></div>');
    var rowsShown = 5;
    var rowsTotal = $('#data tbody tr').length;
    var numPages = rowsTotal/rowsShown;
    for(i = 0;i < numPages;i++) {
        var pageNum = i + 1;
        $('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
    }
    $('#data tbody tr').hide();
    $('#data tbody tr').slice(0, rowsShown).show();
    $('#nav a:first').addClass('active');
    $('#nav a').bind('click', function(){

        $('#nav a').removeClass('active');
        $(this).addClass('active');
        var currPage = $(this).attr('rel');
        var startItem = currPage * rowsShown;
        var endItem = startItem + rowsShown;
        $('#data tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
        css('display','table-row').animate({opacity:1}, 100);
    });
});

При переключениями между страницами исчезает строка с названиями столбцов, как сделать чтобы первая строка не исчезала?

Answer 1

[0xD34F]

Вынесите её в thead.

Ну или можно путём дурака пойти.

Добавляйте .slice(1) там, где работаете со строками таблицы. Т.е., вместо

$('#data tbody tr').hide();
$('#data tbody tr').slice(0, rowsShown).show();

будет

$('#data tbody tr').slice(1).hide().slice(0, rowsShown).show();

, а

$('#data tbody tr').css('opacity',...

превратится в

$('#data tbody tr').slice(1).css('opacity',...

UPD. Как это может выглядеть: thead, и дурацкий вариант.

Comments

[Сергей]

Вообще исчезает

[0xD34F]

Предлагаете мне угадать, где вы накосячили? Нет, так не будет. Сообщите больше информации или воспроизведите свою ситуацию в песочнице.

UPD. Добавил примеры реализации. Смотрите, думайте.