My goal is to create a pagination disable handler that will effectively disable the first and previous page buttons when I am on the first page, allowing only the next page and last page buttons to be clickable. Similarly, when I am on the last page, the next page and last page buttons should be disabled while the first page and previous page buttons remain clickable. How can I implement this functionality?
Pagination view design:
The first button represents the first page, the second button is for the previous page, the third one is an input area where you can enter the desired page number, the fourth button is for the next page, and the fifth button represents the last page.
https://i.sstatic.net/nh7K0.png
Function implementation:
public function index(){
$master_product_list = EbayMasterProduct::with('variationProducts')->orderByDesc('id')->paginate(50);
$master_decode_product_list = json_decode(json_encode($master_product_list));
return view('ebay.master_product.master_product_list',compact('master_product_list','master_decode_product_list'));
}Pagination view code snippet:
<div class="pagination-area">
<form action="{{url('pagination-all')}}" method="post">
@csrf
<div class="datatable-pages d-flex align-items-center">
<span class="displaying-num"> {{$master_product_list->total()}} items</span>
<span class="pagination-links d-flex">
<a class="first-page btn" href="{{$master_decode_product_list->first_page_url}}" data-toggle="tooltip" data-placement="top" title="First Page">
<span class="screen-reader-text d-none">First page</span>
<span aria-hidden="true">«</span>
</a>
<a class="prev-page btn" href="{{$master_decode_product_list->prev_page_url}}" data-toggle="tooltip" data-placement="top" title="Previous Page">
<span class="screen-reader-text d-none">Previous page</span>
<span aria-hidden="true">‹</span>
</a>
<span class="paging-input d-flex align-items-center">
<label for="current-page-selector" class="screen-reader-text d-none">Current Page</label>
<input class="current-page" id="current-page-selector" type="text" name="paged" value="{{$master_decode_product_list->current_page}}" size="3" aria-describedby="table-paging">
<span class="datatable-paging-text d-flex">of<span class="total-pages">{{$master_decode_product_list->last_page}}</span></span>
<input type="hidden" name="route_name" value="ebay-master-product-list">
</span>
<a class="next-page btn" href="{{$master_decode_product_list->next_page_url}}" data-toggle="tooltip" data-placement="top" title="Next Page">
<span class="screen-reader-text d-none">Next page</span>
<span aria-hidden="true">›</span>
</a>
<a class="last-page btn" href="{{$master_decode_product_list->last_page_url}}" data-toggle="tooltip" data-placement="top" title="Last Page">
<span class="screen-reader-text d-none">Last page</span>
<span aria-hidden="true">»</span>
</a>
</span>
</div>
</form>
</div>