How to add custom CSS classes to pagination

[coliff]

I'd like to use Simple-DataTables with Bootstrap 5 CSS without rewriting any CSS classes. Is it possible to add CSS class names to the existing classes at run-time?

https://getbootstrap.com/docs/5.1/components/pagination/

For Bootstrap's pagination that'd mean adding the class pagination to dataTable-pagination-list and then page-item to each li and page-link to each a.

[coliff]

Answering my own question, I added this code for now, but keen to know if there is a better way:

document.addEventListener("DOMContentLoaded", function () {
  const ul = document.querySelector(".dataTable-pagination-list");
  ul.className = "pagination";

  var pageItem = document.querySelectorAll(".dataTable-pagination > ul > li");
  for (var i = 0; i < pageItem.length; i++) {
    pageItem[i].classList.add("page-item");
  }

  var pageLink = document.querySelectorAll(".dataTable-pagination > ul > li > a");
  for (var i = 0; i < pageLink.length; i++) {
    pageLink[i].classList.add("page-link");
  }
});

[dday9]

@coliff - your approach looks good to me. If I were implementing something like this then I'd essentially take your code and plug it into a custom plugin.

[johanneswilm]

If there is interest in it, we can make the class names configurable. This is already the case for the editing plugin.

[coliff]

If there is interest in it, we can make the class names configurable. This is already the case for the editing plugin.

YES PLEASE! That would be awesome. The 'solution' code I posted above doesn't actually work well at all beacuse the class names are lost when the DOM is reloaded. Using custom class names configured would be very helpful.

[johanneswilm]

@coliff ok, this has now been added to [email protected]