Pagination within a table using jQuery

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/

You need to append the td elements like in this answer: http://stackoverflow.com/questions/2362982/jquery-dynamically-create-table-tr-td-or-etc-and-append-attributes — wes.stueve, Sep 07 '12 at 11:53
I recommend having a whole new table, it is much easier than trying to appending/removing each individual `td` cell. — ronalchn, Sep 07 '12 at 11:56
OK, I see the logic, append a range of new TDs while removing the first one. The issue I have is that this will not apply to every time the users clicks next or previous, only when he reached the last column. — Yunowork, Sep 07 '12 at 12:00

score 0 · Answer 1 · answered Sep 07 '12 at 11:56

Make the page involve the whole table. Duplicate all of the table structure for each page.

Then, when previous or next is clicked, you need an event handler (should be easy), that just updates the column that you are at, and updates the name (also easy), just say:

$("#title").val(titlearray[columnnumber]); // or something like this

When you reach the end, programmatically call whatever changes the page (which loads a new table).

Now I am not sure where you are getting data from - whether it is already loaded but not shown, or whether you do an AJAX call. If there is a plugin, you should probably use it.

Either way, if eg. it is already on the page, you can just say something like this in your previous/next event handler (if you are not using a plugin):

if (columnnumber == lastcolumn) {
  newpagenumber = oldpagenumber + 1; // for next page
  // do this if you don't have a pagination plugin
  $("#page" + oldpagenumber).css("display:none"); // hide previous page
  $("#page" + newpagenumber).css("display:block"); // show next page
  // otherwise use a plugin to switch pages
}

In your html, you can just have:

<table id="page1" style="display:block"></table>
<table id="page2" style="display:none"></table>
<table id="page3" style="display:none"></table>

This idea is just to have every table already in the HTML, but you just show the table representing the correct page.

The issue is I cannot change the current code in regards to the system. Where I'm rly blocked is to append the TD's in such a specific way. — Yunowork, Sep 07 '12 at 13:47

score 0 · Accepted Answer · answered Sep 07 '12 at 12:32

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

Seems to work, an option I'm thinking of is to make a href out of the Rn in the td and get the title attribute displayed on top. Thanks! — Yunowork, Sep 07 '12 at 13:46

Pagination within a table using jQuery

2 Answers2