Add a button in the pagination section

Add a button in the pagination section

zazoozazoo Posts: 1Questions: 1Answers: 0

Hi Colin. I am trying to add a button in the pagination section on the right, next to the 'next' link. i tried doing so in initComplete function by using insertAfter function like so $("button to be inserted").insertAfter('#next link id in pagination'). it worked but of course once i get to the next page, it disappears. What is the best way to insert a button in the pagination area. i tried Dom too but it's not working since DOM doesn't let me insert the element in the p area.
Thank you

Answers

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

    A clunky option would be to re-add the button again every time you change page, which you can detect with the page.

    A tidier solution would be to add the button into the pagination control. This link here shows some other pagination plug-ins that you could use a template,

    Colin

  • allanallan Posts: 63,535Questions: 1Answers: 10,475 Site admin

    The dom option is the way to do that, although you'll need a little CSS as well: https://live.datatables.net/nakakuju/1 .

    new DataTable('#example', {
       dom: 'lfrti<"toolbar">p'
    });
     
    document.querySelector('div.toolbar').innerHTML = '<button>My button</button>';
    
    div.toolbar {
      float: right;
    }
    

    Note that the output view needs to be wide enough for DataTables' CSS not to collapse the controls down.

    Allan

Sign In or Register to comment.