Customisation of paging control with Image and Title in DataTables.net

Pingpong

Is it possible to customise the paging control to below?

1 Using image for Next/Last/Previous/First
2 All links have a title attribute, like "Go to page 5"

colin

See this example from this thread for the icons.

Without creating a pagination plugin, the only other way for the title attribute would be too them in a drawCallback function,

Colin

Pingpong

On navigation icon, I have to use the exact images for the navigation buttons due to company rules. Is it supported by DataTables.net.

Is there a paging plugin that meets all my requirement?

I cannot find any plugin available from below.
https://datatables.net/plug-ins/pagination/

on the drawCallback function, does it mean that I need to use jQuery, and find all items and insert title attribute for each item. Do we have similar code for this?

colin

On navigation icon, I have to use the exact images for the navigation buttons due to company rules. Is it supported by DataTables.net.

That example I posted just demonstrates how to do it - you can use any icons you want, it's just an example.

does it mean that I need to use jQuery, and find all items and insert title attribute for each item. Do we have similar code for this?

Exactly. There isn't a plugin for that, so that'll be something you'll need to create,

Colin

Pingpong

That example I posted just demonstrates how to do it - you can use any icons you want, it's just an example.

Do you mean this link http://live.datatables.net/oxudak/6/edit?
The link is NOT using image icon, it is using a text, if my understanding is correct.

Please could you elaborate on how to use image icon for navigation buttons, if possible?

kthorngren

The docs for language.paginate.first and the others state this:

Note that DataTables writes this property to the document as HTML, so you can use HTML tags in the language string

You can add an img tag to load your image.

Kevin

Pingpong

Hi @kthorngren

Please could you show me an example. It would be very appreciated. I am new.

Pingpong

do you mean like this?

                          paginate: {

                                next:     '<img src="/lib/dataTables/images/sort_both.png"/>',

                                }

Is it possible use two images, one for active, one for disabled?

colin

Ho, there's only the single value.

Colin