Question

I have been working on the following code for the last few days and can’t find a solution that seems to work as I want it. What I would need is a sort of a pagination within a part of a table. following actions/events are required:

• When clicking previous or next the name of the race in the top should change accordingly with the higlighted race. SO R2 = Race 2 – Virgina etc..

• Here comes the tricky part, once you have reached the last visible (highligted) column and click next a new column should appear, so the range will be R2-R7 and so on, the total number is always different. The width of all the Rn should stay the same.

My question is, is this is even possible in jQuery and how? I’ve studied some pagination plug-ins but none seem to be able to do this.

The code is live here: http://jsfiddle.net/yunowork/5r9ZW/

Answer 1

Is not perfect but could be a starting point:

I’ve only test it in the ‘next’.

I’ve addedd in the next function:

var $currCol = $('.highlighted'); //to get the current column

$('.race strong').text($('.highlighted').next('td:first').text()); //To set the title: R1 - R2 - R3 ...

and

else{
        $currCol.each(function(i,v){
            var k = i + 1;   
            var id = parseInt(v.id.replace('r',''));                
            id++;
            if(k == 1) $(this).clone().text('R'+id).attr('id', 'r'+id).appendTo($('table tr').eq(k));
            else $(this).clone().attr('id', 'r'+id).appendTo($('table tr').eq(k));
        });
    } // to add a new column

Hope this help