【问题标题】:Different paginations in different tabs directs to the same tab不同选项卡中的不同分页指向同一个选项卡
【发布时间】:2021-04-03 15:10:21
【问题描述】:

抱歉这个菜鸟问题。

我有:

• 一个网页中的不同标签和

• 每个选项卡都有一个分页

问题是,当点击不同分页的页面时,它会:

• 指向同一个标签

就像我在 tab_2 分页中点击了第 2 页,然后我被重定向到 tab_1 第 1 页

在我的 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')
    ]);
}

我该怎么办?我认为使分页中的每个页面都表现得像会跳转到 id 的锚标记,但我正在使用 {!! $object->links() !!} 但我不知道如何实现它。

<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>

【问题讨论】:

  • 你能发布库存视图吗
  • @alprnkeskekoglu ,每当我在 tab_2 分页中单击第 2 页时,它都会将我重定向到 tab_1 第 1 页,而不是直接转到 tab_2 第 2 页

标签: laravel bootstrap-4 pagination


【解决方案1】:

Laravel 分页基于 url 中的页码参数工作。例如,如果我有一个客户 crud,并且我在 crud 的第二页,那么 URL 将是:

http://localhost:8080/customers?page=2

因此,如果您在一页上有两个碎片,它们将不会同时工作。您应该使用任何客户端 jquery 分页插件来解决这个问题。试试这个插件: jquery pagination plugin

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-04-05
    • 2015-09-21
    • 1970-01-01
    • 1970-01-01
    • 2017-01-29
    • 2013-02-22
    • 1970-01-01
    • 2018-04-03
    相关资源
    最近更新 更多