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

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

PingpongPingpong Posts: 15Questions: 5Answers: 0

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"

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • PingpongPingpong Posts: 15Questions: 5Answers: 0
    edited September 2020

    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?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    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

  • PingpongPingpong Posts: 15Questions: 5Answers: 0

    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?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • PingpongPingpong Posts: 15Questions: 5Answers: 0

    Hi @kthorngren

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

  • PingpongPingpong Posts: 15Questions: 5Answers: 0

    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?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    Ho, there's only the single value.

    Colin

This discussion has been closed.