How to show current page number in different place in a webpage

atataylor

How to show current page number in different place in a webpage, in addition to the normal pagination. Say for example in a headline. I am using DataTables to create league tables, league One corresponds to page 1 and so on. So what I want to do is have the page number appear next to the headline League #. After doing some research on this site using page.info() I amended the code from:

var info = table.page.info()
$('#tableInfo').html(
    'Currently showing page '+(info.page+1)+' of '+info.pages+' pages.'
);

To this:

var info = table.page.info();
$('#tableInfo').html(
    ' League '+(info.page+1));

They both work but always show the current page as 1, it does not change to 2(or whatever button is clicked) when the pagination button is clicked. It is always shown as page 1.

colin

You would need to add that code into a draw event handler - that way it'll be called when the table is drawn,

Colin

atataylor

Thank you, Colin, I have got that working now. In my first attempt with this code:

table.on( 'draw', function () {
    var info = table.page.info();
$('#tableInfo').html(
    'League '+(info.page+1));;
} );

The initial state when the web page is first opened is blank. The text and page number only appear when the pagination is activated, which makes sense. So, I hard coded the initial text and number in the H1 tag, i.e. League 1 because the page will always open at page 1 so when the pagination is activated the number changes accordingly. Is this the correct way to do it or have I made an error with the code? Thanks again for your help.

colin

Sounds like it's working, and that's the important thing

Colin

colin

Btw, apologies you had to reply so many times, your messages were getting caught by the spam filter for some reason!

atataylor

Thanks Colin, I was also banned for a while not sure why. It might have been because someone put a link to a website in the comments which as far as I could see had nothing to do with my question or DataTables. I see it’s gone now.
Bizarrely the above code works on a test page I created to test the code but not on the actual page with the table I wanted to use it on, so I am still working on it. Thanks again for your help.