I have the tab panel to loop out based on the category table. When the user click in the tab, it will shows the data belong to the category. Then there is the pagination based on the data and one page will have 3 products, when the user change to link "2" he goes to "http://project1.test/allfragment?page=2".
Issue:
The issue with this context is that when a pagination link is clicked in some tab, for example if the user is in the tab "t2", and clicks in the pagination link "2", the url changes to "http://project1.test/allfragment?page=2" but the tab that become active his the first one which is the "t1" tab. Then if the user clicks in other tab "t2,t3,t4" it appears the results of the page 2.
Anyone have the idea to solve this issue ya? To achieve like if user click the tab "t2" with link "2" or "3" it will still active in tab "t2" instead of go back to active in "t1". Also same with other tab, mean it always active in the tab if user click the link pagination belong the tab.
Full code on this page to show all the tabs:
<div class="container">
<div class="tab-btn">
<div class="row gap-3 gap-xl-0 align-items-center justify-content-xl-between justify-content-start">
<div class="col-md-12">
<ul class="nav nav-filter gap-3 justify-content-start justify-content-xl-center" role="tablist">
@foreach ($cate as $item)
<li class="nav-item" role="presentation">
<button class="cmn-btn @if($loop->first) active @endif" id="tab-{{$item['id']}}" data-bs-toggle="tab"
data-bs-target="#id{{$item['id']}}" type="button" role="tab"
aria-controls="id{{$item['id']}}" aria-selected="false">{{$item['name']}}</button>
</li>
@endforeach
</ul>
</div>
</div>
</div>
<div class="tab-content compete-in">
@foreach ($cate as $item)
<div class="tab-pane fade @if($loop->first) show active @endif" id="id{{$item['id']}}" role="tabpanel" aria-labelledby="tab-{{$item['id']}}">
<div class="row cus-mar">
@foreach ($data[$item['id']]['data'] as $child)
@php
$skinsIdExists = false;
// Iterate through the array and check if the skins_id exists
foreach ($gethistory as $array) {
if ($array['skins_id'] == $child['id']) {
$skinsIdExists = true;
break;
}
}
@endphp
@if($child['category_id'] == $item['id'])
<div class="col-xl-4 col-md-6">
<div class="single-box">
<div class="single-slide">
<div class="icon-box position-relative {{$child['status'] == 0 ? "disabledimg" : ""}}">
<img src="storage/skinimg/{{$child['images']}}" alt="image" style="height:225px">
<div class="abs-area">
<span class="entry3 mdtxt"><i class="fa {{$child['status'] == 0 ? "fa-lock" : "fa-unlock-alt"}}" aria-hidden="true"></i> {{$child['status'] == 0 ? __('web.locktxt') : __('web.unlocktxt')}}</span>
</div>
</div>
<div class="bottom-area">
<h6>{{$child['name']}}</h6>
<div class="btn-area mb-3 mt-15">
@if($child['status'] == 0)
<a class="w-50 text-center custombtn justify-content-center">{{__('web.getbtn2')}}</a>
@elseif($skinsIdExists)
<a class="w-50 text-center custombtn justify-content-center">{{__('web.reddmedtxt')}}</a>
@else
<a class="w-50 text-center cmn-btn justify-content-center btngetnow" skinid={{$child['id']}}>{{__('web.getbtn')}}</a>
@endif
</div>
</div>
</div>
</div>
</div>
@endif
@endforeach
</div>
@if (($data[$item['id']]['current_page'] != $data[$item['id']]['last_page']))
<nav aria-label="Page navigation" class="d-flex justify-content-center pagination-area mt-60">
@if ($data[$item['id']]['prev_page_url'])
<a class="page-btn previous cmn-btn alt" href="{{ $data[$item['id']]['prev_page_url'] }}" aria-label="Previous">
<i class="icon-d-arrow-thin"></i>
</a>
@endif
<ul class="pagination justify-content-center align-items-center">
<!-- First Page -->
<li class="page-item {{ ($data[$item['id']]['current_page'] == 1) ? 'active' : '' }}">
<a class="page-link cmn-btn alt" href="{{ $data[$item['id']]['links'][1]['url'] }}">1</a>
</li>
<!-- Ellipsis before current page -->
@if ($data[$item['id']]['current_page'] > 4)
<li class="page-item disabled">
<span class="page-link cmn-btn">...</span>
</li>
@endif
<!-- Pages before current page -->
@for ($i = max(2, $data[$item['id']]['current_page'] - 2); $i < min($data[$item['id']]['last_page'], $data[$item['id']]['current_page'] + 2); $i++)
<li class="page-item {{ ($data[$item['id']]['current_page'] == $i) ? 'active' : '' }}">
<a class="page-link cmn-btn alt" href="{{ $data[$item['id']]['links'][$i]['url'] }}">{{ $i }}</a>
</li>
@endfor
<!-- Ellipsis after current page -->
@if ($data[$item['id']]['current_page'] < $data[$item['id']]['last_page'] - 2)
<li class="page-item disabled">
<span class="page-link cmn-btn">...</span>
</li>
@endif
<!-- Last Page -->
<li class="page-item {{ ($data[$item['id']]['current_page'] == $data[$item['id']]['last_page']) ? 'active' : '' }}">
<a class="page-link cmn-btn alt" href="{{ $data[$item['id']]['last_page_url'] }}">{{ $data[$item['id']]['last_page'] }}</a>
</li>
</ul>
@if ($data[$item['id']]['next_page_url'])
<a class="page-btn next cmn-btn alt" href="{{ $data[$item['id']]['next_page_url'] }}" aria-label="Next">
<i class="icon-d-arrow-thin"></i>
</a>
@endif
</nav>
@endif
</div>
@endforeach
</div>
</div>
Controller:
public function ListAllFragement()
{
$getcategory = Category::get();
$gethistory = UserGetHistory::where('users_id', Auth::user()->id ?? "")->get();
if (!empty($gethistory)) {
$dd = $gethistory->toArray();
} else {
$dd = [];
}
$categories = Category::all();
$data = [];
foreach ($categories as $category) {
$data[$category->id] = Skin::where('category_id', $category->id)->paginate(3)->toArray();
}
return view('listall')
->with('cate', $getcategory)
->with('gethistory', $dd)
->with('data', $data);
}
Example of the issue:
Instead of appear the page with the "t2" tab active like the image above but with the pagination link "2" active instead of the pagination link "1" active, it appaers the page with the default active tab "t1":