[Pagination] How do I change the pagination to a ?

[Pagination] How do I change the pagination to a ?

codingismypassioncodingismypassion Posts: 2Questions: 1Answers: 0

This question is similar to https://datatables.net/forums/discussion/71404/accessibility-pagination-using-actual-buttons-instead-of-links? , where I intend to change tha <a> in the pagination <li> to <button>. However, the JS Bin in that question does not show how the <a> are changed to <button> . How do I add it to my HTML?

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    The first example in the post you linked to has that (use <button> elements) - it's this one here: http://live.datatables.net/kayiwoba/1/edit

    You could use that plugin code as the basis for your changes,

    Colin

  • codingismypassioncodingismypassion Posts: 2Questions: 1Answers: 0

    @colin I don't quite get it, as I can see that in the example, the paging numbers are indeed buttons instead of links, but how do I change it? I'm unsure as to which part of the plugin JS code I should be including to achieve the <button>

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    If you search for the lines

    if ( btnDisplay !== null ) {
        node = $('<button>', {
            'class': classes.sPageButton+' '+btnClass,
    

    you'll see where the button is being created. You'll need to modify it around there,

    Colin

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    I've gone ahead and made a little tweak to DataTables to add a new pagingTag option which can be used to set the element that can be used.

    Use:

    new DataTable('#myTable', {
      pagingTag: 'button'
    });
    

    http://live.datatables.net/xoqebozi/1/edit

    The nightly has this change now and I'll do a release with the change soon.

    This new option is just temporary until DataTables 2 is available (ETA - currently unknown!) at which point it will have no effect (button will be used).

    Allan

Sign In or Register to comment.