How to call a function when click onto pagination button?

menkey18

Hi I am using pagination with server-side data, and wondering how to call a function when clicking onto a pagination button.

In details:

When I click onto any pagination button, before leaving the page, call a function to go through the checking process.

if the function returns false, then do not leave the page.

I am wondering how can I achieve that? I went through the list of callbacks and couldn't find a proper callback to achieve this.

Hope to get an answer, thanks.

Lan

allan

You might be able to use fnPreDrawCallback to do that, although there isn't a flag to say if the draw is being caused by a paging event or something else, so you might need to add some logic if you need to know that.

The alternative is to use a pagination plug-in ( http://datatables.net/development/pagination ) and add your function call in as needed.

Allan

menkey18

hi Allan,

Calling fnPreDrawCallback is already too late, because the table has already left the last page. I need the alert message to be called on the pagination event.

I suppose adding the pagination plug-in is a more suitable way to do this. Is there a simpler way to trigger my function on pagination event?

Thanks.

Lan

allan

The whole point of fnPreDrawCallback is that it is called before the page is changed, so it can be cancelled :-). That should work... Here is an example that shows it doesn't allow anything to happen: http://live.datatables.net/uveder/edit .

> Is there a simpler way to trigger my function on pagination event?

Three options I can think of:

1. Attach a 'live' event listener to the default pagination elements. But you need to be cars of order - it seems a bit fragile to me this approach.

2. Use fnPreDrawCallback

3. Use a pagination plug-in that will do what you need. They aren't too hard to make - you can even just pull the pagination code out of DataTables and use that :-)

Allan

menkey18

Thanks again Allan,

I am implementing the pagination plug-in as option 3 taken.

And I would like to implement with the style "full_numbers" instead of "four_buttons", where can I find the code?

I am browsing through the options in the plug-in: http://datatables.net/plug-ins/pagination

but it is not obvious to me which style is "full_numbers".

Thanks.

Lan

P.S. no worrys, I got it now, it is the "Links pagination ". Cheers.

allan

Here: https://github.com/DataTables/DataTables/blob/master/media/src/ext/ext.paging.js

Allan

menkey18

Hi Allen,

With the "links pagination", it works exactly the way I want.

But the buttons have become links without styling, so I would like to know how to implement the css styles to the buttons.

Cheers.

Lan

menkey18

That's great, thanks for the link Allan!

menkey18

Hi Allan,

So I have implemented the plugin with "links pagination", and the functions is working fine.

But the css style is messed, I tried to add ".paging_links" to the css but doesn't seem to work.

For example:

[code]
.paging_links a.paginate_button {
BORDER-RIGHT: #aaa 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaa 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 0px 3px; BORDER-LEFT: #aaa 1px solid; CURSOR: hand; PADDING-TOP: 2px; BORDER-BOTTOM: #aaa 1px solid; -webkit-border-radius: 5px; -moz-border-radius: 5px
}
[/code]

What would be a proper way to reimplement the style in css?

Thanks a lot.

Lan