How do you keep current paginate_button active (bootstrap) after refresh?

Question

I want to click button and keep active currrent button after refresh/reload

My URLs not change when I click other paginate_button , But page is change.

--This button--

https://i.stack.imgur.com/86dJj.jpg

--This code--

<ul class="pagination">
<li class="paginate_button previous disabled" aria-controls="dataTables-example" tabindex="0" id="dataTables-example_previous">
    <a href="#">Previous</a>
</li>
<li class="paginate_button active" aria-controls="dataTables-example" tabindex="0">
    <a href="#">1</a>
</li>
<li class="paginate_button " aria-controls="dataTables-example" tabindex="0">
    <a href="#">2</a>
</li>
<li class="paginate_button " aria-controls="dataTables-example" tabindex="0">
    <a href="#">3</a>       
</li>
<li class="paginate_button " aria-controls="dataTables-example" tabindex="0">
    <a href="#">4</a>
</li>
<li class="paginate_button " aria-controls="dataTables-example" tabindex="0">
    <a href="#">5</a>
</li>
<li class="paginate_button " aria-controls="dataTables-example" tabindex="0">
    <a href="#">6</a>
</li>
<li class="paginate_button " aria-controls="dataTables-example" tabindex="0">
    <a href="#">7</a>
</li>
<li class="paginate_button next" aria-controls="dataTables-example" tabindex="0" id="dataTables-example_next">
    <a href="#">Next</a>
</li>

Answer 1

move the active class to the <li> you want to be active for that page. Example: https://yoursite/page/2 would mean that the second <li> would have the active class.

Answer 2

you can use window.location.pathname or window.location.hash , depending on how you are working your URLs, to test for the current page. Use that info to select the proper li and set it to active.