Different paginations in different tabs directs to the same tab - laravel

Question

Sorry for this noob question.
I have:
• different tabs in one webpage and
• each tab has a pagination
The problem is that when clicking a page in different pagination it would:
• lead to the same tab
Like i clicked page 2 in tab_2 pagination and I get redirected to tab_1 page 1
In my InventoryController:
public function index() {
return view('employee.inventory', [
'ingredients' => Ingredient::with('supplier')->paginate(10),
'products' => $products = Product::paginate(10, ['*'], 'products_page'),
'orders' => Order::paginate(10, ['*'], 'orders_page'),
'users' => User::paginate(10, ['*'], 'users_page'),
'suppliers' => Supplier::paginate(10, ['*'], 'suppliers_page')
]);
}
What should I do? I thought making each page in paginations behave like anchor tag that will jump to an id but I'm using {!! $object->links() !!} but I don't know how to implement it.
<div class="col-md-6">
<!-- Custom Tabs -->
<div class="nav-tabs-custom">
<ul class="nav nav-tabs table-tabs" style="display: flex; flex-directed: row-reverse;">
<li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">
<button style="background-color: #C6B877; width:100px; color: white;" type="button" class="btn btn-default">
Ingredients
</button>
</a></li>
<li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">
<button style="background-color: #C6B877; width:100px; color: white;" type="button" class="btn btn-default">
Products
</button>
</a>
</li>
<li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">
<button style="background-color: #C6B877; width:100px; color: white;" type="button" class="btn btn-default">
Orders
</button>
</a></li>
<li class=""><a href="#tab_4" data-toggle="tab" aria-expanded="true">
<button style="background-color: #C6B877; width:100px; color: white;" type="button" class="btn btn-default">
Users
</button>
</a></li>
<li class=""><a href="#tab_5" data-toggle="tab" aria-expanded="true">
<button style="background-color: #C6B877; width:100px; color: white;" type="button" class="btn btn-default">
Suppliers
</button>
</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_1">
<div class="card" style="width: 87.5em; height: 45em;">
<div class="card-header">
<h3 class="card-title">Ingredients</h3>
<div class="table-add-delete" style="float: right;">
<i class="fas fa-plus-square" data-toggle="modal" data-target="#modal-default-1" style="cursor:pointer ;color: #2AC0CC; font-size: 24px;"></i>
<i class="fas fa-trash-alt" data-toggle="modal" data-target="#modal-default-1" style="cursor: pointer; color: #2AC0CC; font-size: 24px;"></i>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<div id="example2_wrapper" class="dataTables_wrapper dt-bootstrap4"><div class="row"><div class="col-sm-12 col-md-6"></div><div class="col-sm-12 col-md-6"></div></div><div class="row"><div class="col-sm-12">
<table id="table1" class="table table-bordered table-hover dataTable dtr-inline" role="grid" aria-describedby="example2_info">
<thead>
<tr role="row">
<th><input type="checkbox" name="checkAll" id=""></th>
<th>ID</th>
<th>NAME</th>
<th>QUANTITY IN STOCK</th>
<th>SUPPLIER</th>
<th>COST</th>
</tr>
</thead>
<tbody>
#foreach ($ingredients as $ingredient)
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>{{$ingredient->ingredient_id}}</td>
<td>{{$ingredient->name}}</td>
<td>{{$ingredient->stock_Quantity}}</td>
<td>{{$ingredient->supplier->name ?? '--unset--'}}</td>
<td>{{$ingredient->cost}}</td>
</tr>
#endforeach
</tbody>
</table></div></div>
<div class="row"><div class="col-sm-12 col-md-5">
</div>
<div class="col-sm-12 col-md-7">
{!! $ingredients->links() !!}
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</div>
<div class="tab-pane" id="tab_2">
<div class="card" style="width: 87.5em; height: 45em;">
<div class="card-header">
<h3 class="card-title">Products</h3>
<div class="table-add-delete" style="float: right;">
<i class="fas fa-plus-square" data-toggle="modal" data-target="#modal-default-2" style="cursor:pointer ;color: #2AC0CC; font-size: 24px;"></i>
<i class="fas fa-trash-alt" data-toggle="modal" data-target="#modal-default-2" style="cursor: pointer; color: #2AC0CC; font-size: 24px;"></i>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
<div id="example2_wrapper" class="dataTables_wrapper dt-bootstrap4">
<div class="row">
<div class="col-sm-12 col-md-6"></div>
<div class="col-sm-12 col-md-6"></div>
</div>
<div class="row">
<div class="col-sm-12">
<table id="table2" class="table table-bordered table-hover dataTable dtr-inline" role="grid" aria-describedby="example2_info">
<thead>
<tr role="row">
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" ><input type="checkbox" name="AllProducts" id=""></th>
<th class="sorting_asc" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending">ID</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" >NAME</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" >DESCRIPTION</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" >QUANTITY</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" >IMAGE</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" >PRICE</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" >CATEGORY(s)</th>
</tr>
</thead>
<tbody>
#foreach ($products as $product)
<tr role="row" class="odd">
<td><input type="checkbox" name="" id=""></td>
<td tabindex="0" class="sorting_1">{{$product->product_id}}</td>
<td>{{$product->name}}</td>
<td>{{$product->description}}</td>
<td>{{$product->stock_Quantity}}</td>
<td><img style="height: 100px; width: 150px;" src="{{ asset('storage/' . $product->image) }}" alt="{{ 'storage/' . $product->image }}"></td>
<td>{{$product->price}}</td>
<td>#</td>
#endforeach
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-5">
</div>
<div class="col-sm-12 col-md-7" >
{!! $products->links() !!}
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</div>

Answer 1

Laravel pagination works on the basis of page number parameter in the url. For example, if I have a customers crud and I am on page two of crud the URL will be like:
http://localhost:8080/customers?page=2
So, if you are having two cruds on one page they will not work simultaneously. You should use any client side jquery pagination plugin in order to tackle this problem. Try this plugin:
jquery pagination plugin