How to customize pagination by hiding numbers

Question

I want to customize the bootstrap-table pagination by hiding numbers and show next, previous,first and last like : enter image description here

I want to customize the bootstrap-table pagination by hiding numbers and show next, previous,first and last buttons

Answer 1

You can use jquery or Js by hiding the numbers and keep the text

    $(document).ready(function() {
  // Hide the page numbers
  $('.pagination').find('li').not('.prev,.next,.first,.last').hide();
  // Update the button text
  $('.pagination').find('.prev').html('« Previous');
  $('.pagination').find('.next').html('Next »');
  $('.pagination').find('.first').html('First');
  $('.pagination').find('.last').html('Last');
});

We hide all list items (li) except the ones with classes .prev, .next, .first, and .last. Then, we update the HTML content of these buttons to display the desired text

 <table id="myTable" data-pagination="true" data-page-list="[10, 25, 50, 
   100]" data-show-pagination-switch="true">
<!-- Your table content here -->
</table>

You can replace with your actual table content. Remember to include the necessary CSS and JS dependencies for Bootstrap and jQuery in your project.