I would like to have this pagination tab active on click and should be an active state even refresh. Like I have selected tab 3 when I refresh the page it should be on tab 3 no go to one. I am not going to use onlClik event in HTML, I just want to do it with CSS or Javascript. I tried it with Local Storage but couldn't be done. and I think it can be done with Local Storage.
<link rel="stylesheet" href="https://affiliation.iub.edu.pk/assets/bootstrap/css/bootstrap.min.css">
<div class="col-sm-7">
<div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
<ul class="pagination">
<li class="paginate_button previous disabled" id="DataTables_Table_0_previous">
<a href="#" aria-controls="DataTables_Table_0" data-dt-idx="0" tabindex="0">Previous</a>
</li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="1" tabindex="0">1</a></li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="2" tabindex="0">2</a></li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="3" tabindex="0">3</a></li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="4" tabindex="0">4</a></li>
<li class="paginate_button active "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="5" tabindex="0">5</a></li>
<li class="paginate_button disabled" id="DataTables_Table_0_ellipsis"><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="6" tabindex="0">…</a></li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="7" tabindex="0">20</a></li>
<li class="paginate_button next" id="DataTables_Table_0_next"><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="8" tabindex="0">Next</a></li>
</ul>
</div>
</div>Yes it can be done with localStorage. Here is how I approached it :-
const lastPage = localStorage.getItem('lastPage') || 1;
const lastPageElement = document.querySelector(`.paginate_button [data-dt-idx='${lastPage}']`);
lastPageElement.parentNode.classList.add('active');
const paginationFooter = document.querySelector('.pagination');
paginationFooter.addEventListener('click', (e) => {
const isPage = e.target.dataset.dtIdx;
if (isPage) {
const currentActivePageElement = document.querySelector('.paginate_button.active');
if (currentActivePageElement) currentActivePageElement.classList.remove('active');
e.target.parentNode.classList.add('active');
const currentPage = e.target.dataset.dtIdx;
localStorage.setItem('lastPage', currentPage);
}
})<link rel="stylesheet" href="https://affiliation.iub.edu.pk/assets/bootstrap/css/bootstrap.min.css">
<div class="col-sm-7">
<div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
<ul class="pagination">
<li class="paginate_button previous disabled" id="DataTables_Table_0_previous">
<a href="#" aria-controls="DataTables_Table_0" data-dt-idx="0" tabindex="0">Previous</a>
</li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="1" tabindex="0">1</a></li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="2" tabindex="0">2</a></li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="3" tabindex="0">3</a></li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="4" tabindex="0">4</a></li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="5" tabindex="0">5</a></li>
<li class="paginate_button disabled" id="DataTables_Table_0_ellipsis"><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="6" tabindex="0">…</a></li>
<li class="paginate_button "><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="7" tabindex="0">20</a></li>
<li class="paginate_button next" id="DataTables_Table_0_next"><a href="#" aria-controls="DataTables_Table_0" data-dt-idx="8" tabindex="0">Next</a></li>
</ul>
</div>
</div>Although try to include your approach as well so that people can tell you what you might have missed. Here is a fiddle where you can see the working.