How do I make the Semantic UI pagination buttons horizontal instead of vertical (stacked)?

hm123

I came across this:

https://github.com/DataTables/DataTables/issues/924

The stackable pagination is a bit on the ugly side for me, but it does work short term. Longer term, switching the pagination types is the way forward here I think! Thanks.

Has this already been implemented in the newer versions of DataTables + Semantic UI?

As you can see the stacked style of pagination looks really bad with DataTables:

https://jsfiddle.net/8abg6ond

How do I make just the pagination buttons unstackable?

while we're on the topic,
@allan I'd like to suggest the Semantic UI pagination buttons be made unstackable by default (provided there's a way to prevent it extending off-creen) as I don't think there's any use case where anyone would want to have to navigate through a skyscraper just to click 'next' or 'page 2' etc.

hm123

here's how it should look like:

https://semantic-ui.com/collections/table.html

allan

At the moment what you would need to do is remove the word stackable from the line in a local copy of the code.

This is something which should be made switchable. And perhaps moreover the numbers should just be removed when in a small view.

Allan

hm123

I see. Thanks Allan.

I was able to use this line of code to make the pagination buttons unstackable (horizontal)

$('.paginate_button, .pagination').removeClass('stackable').addClass('unstackable');

And it looks proper at first, but then when I click previous or next it reverts back to being vertical

https://jsfiddle.net/twzwmwqs/

tangerine

Did you try what Allan suggested?

allan

Yes - you'd need to do what I suggested, otherwise the stackable class would just keep being readded everytime the table is drawn.

Allan

hm123

It seems I wont be able to use DataTables' CDN for now, but yes it does work the way Allan suggested.

crwdzr

one potential hack to keep using the cdn is to just remove and re-add the desired classes in the "fnDrawCallback" function

i wouldn't recommend it because it wouldn't be very efficient but it would let you stay on the cdn and you wouldn't have to go into the source code