javascript - 如何在 Bootstrap 选项卡上维护分页？

Question

我的索引中有 4 个标签。每个都包含一个表，其中包含有关我数据库中产品的详细信息。我在表格下面添加了一个分页，但是当我尝试使用标签页时，它总是在第一个标签中返回。我尝试使用 Laravel 的 appends，但我仍然遇到同样的问题。

我的列表标签

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a href="#home" aria-controls="home" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-shopping-cart"></i> Loja</a>
    </li>
    <li role="presentation">
        <a href="#mlb" aria-controls="mlb" role="tab" data-toggle="tab">Mercado Livre</a>
    </li>
    <li role="presentation">
        <a href="#cnova" aria-controls="cnova" role="tab" data-toggle="tab">CNova</a>
    </li>
    <li role="presentation">
        <a href="#b2w" aria-controls="b2w" role="tab" data-toggle="tab">B2W</a>
    </li>
    <li role="presentation">
        <a href="#walmart" aria-controls="walmart" role="tab" data-toggle="tab">Wal-Mart</a>
    </li>
</ul>

标签内容(我刚刚放了我当前正在使用的标签)

<div role="tabpanel" class="tab-pane active" id="home">
    <div id="product-table">
        @include('admin.product-table')
    </div>
</div>
<div role="tabpanel" class="tab-pane" id="mlb">
    @include('admin.product-mlb')
</div>

有什么建议吗？看过一些与此相关的文章，但还是有困难。

Answer 1

其中一种方法是将查询字符串附加到分页对象，例如

$users->appends(['page' => 'home'])->links();

并且在您看来交叉检查该查询字符串为

<li role="presentation" @if (Request::query('page') === null || Request::query('page') == 'home') class="active" @endif>
    <a href="#home" aria-controls="home" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-shopping-cart"></i> Loja</a>
</li>

<div role="tabpanel" class="tab-pane @if (Request::query('page') === null || Request::query('page') == 'home') active @endif" id="home">
    <div id="product-table">
        @include('admin.product-table')
    </div>
</div>