分页时如何保持在选定的选项卡中答案

【问题标题】：How can I keep stay in the selected tab while paginating分页时如何保持在选定的选项卡中
【发布时间】：2018-06-09 18:31:26
【问题描述】：

我有两个以下选项卡，其中选项卡各自的数据是分页的。当我在第一个选项卡中时，分页工作正常。但是当我转到第二个标签并尝试分页时，它会将我带到第一个标签。

谁能帮我解决这个问题，当我浏览该特定标签的页面时，我如何才能留在选定的标签中？

PHP部分：

<?php
    $first = [];
    for ($i = 1; $i <=25; $i++)
    {
        $first[] = $i; 
    }

    $second = [];
    for ($j = 11; $j <=35; $j++)
    {
        $second[] = $j; 
    }

function paginate($data)
{
    $totalrows = count($data);
    $perpage = 10;

    $totalpages = ceil($totalrows / $perpage); // total number of pages

    if ($totalpages < 1)
    {
        $totalpages = 1;
    }

    $page = 1;
    if (isset($_GET['page']))
    {
        $page = (int)$_GET['page'];
    }

    if ($page < 1)
    { 
        $page = 1; 
    } 
    elseif ($page > $totalpages)
    { 
        $page = $totalpages; // set page to totalpages page number
    }

    $offset = ($page - 1) * $perpage;

    if ($offset < 0)
    {
        $offset = 0;
    }

    $items = array_slice($data, $offset, $perpage);

    $pagination = "";

    if ($totalpages != 1)
    {
        $pagination .= '<ul class="pagination">';
        // first and previous link
        if ($page > 1) 
        {
            $previous = $page - 1;
            $pagination .= '<li class="page-item"><a class="page-link" href="' . $_SERVER['PHP_SELF'] . '?page=1" class="btn btn-default">First</a></li>'; // goto first page
            $pagination .= '<li class="page-item"><a class="page-link" href="' . $_SERVER['PHP_SELF'] . '?page=' . $previous . '" class="btn btn-default">Previous</a></li>';
        }

        // display page numbers
        for ($i = 1 ; $i <= $totalpages; $i++)
        {
            if ($i != $page)
            {
                $pagination .= '<li class="page-item"><a class="page-link" href="'.$_SERVER['PHP_SELF'].'?page='. $i .'" class="btn btn-default">'.$i.'</a></li> ';
            }
            else
            {
                $pagination .= '<li class="page-item"><button type="button" class="btn btn-default">' . $i . '</button></li>';
            }
        }

        // last and next link
        if ($page != $totalpages)
        {
            $next = $page + 1;
            $pagination .= '<li class="page-item"><a class="page-link" href="'.$_SERVER['PHP_SELF'].'?page='. $next . '" class="btn btn-default">Next</a></li>';
            $pagination .= '<li class="page-item"><a class="page-link" href="'.$_SERVER['PHP_SELF'].'?page='. $totalpages . '" class="btn btn-default">Last</a></li>'; // goto last page
        }
        $pagination .= '</ul>';
    }

    return [
        'items' => $items,
        'pagination' => $pagination,
    ];
}

HTML 部分：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#first">First Tab</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#second">Second Tab</a>
    </li>
  </ul>

  <div class="tab-content">
    <div id="first" class="container tab-pane active"><br>
      <div class="table-responsive">
        <table class="table table-striped table-bordered">
        <tbody>
        <?php
          $c = paginate($first);

          foreach ($c['items'] as $value)
          {
              echo '<tr>';
              echo '<td>' . $value . '</td>';
              echo '</tr>';
          }
        ?>
        </tbody>
        </table>
      </div>
      <div><?php echo $c['pagination']; ?></div>
    </div>
    <div id="second" class="container tab-pane fade"><br>
      <div class="table-responsive">
        <table class="table table-striped table-bordered">
        <tbody>
        <?php
          $d = paginate($second);

          foreach ($d['items'] as $value)
          {
              echo '<tr>';
              echo '<td>' . $value . '</td>';
              echo '</tr>';
          }
        ?>
        </tbody>
        </table>
      </div>
      <div><?php echo $d['pagination']; ?></div>
    </div>
  </div>
</div>
</body>
</html>

请帮我解决这个问题。谢谢。

【问题讨论】：

你应该使用 ajax。你的 php 和 JavaScript 代码在哪里？
@AmrBerag，请检查我是否添加了 PHP 部分。我还没有使用任何 JavaScript。
已删除抱歉gg

标签： php pagination bootstrap-4 bootstrap-tabs

【解决方案1】：

您可以使用 url 移动活动标签索引。

例如，（我没有测试以下代码）

为 HMTL 分页；

<a href="javascript:;" class="paginate_link" data-page="1">1</a>
<a href="javascript:;" class="paginate_link" data-page="2">2</a>
<a href="javascript:;" class="paginate_link" data-page="3">3</a>

Javascript & jQuery

function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

// If activeTab variable has on the query string in current url, when page is loaded, hides all tab first, later than sets active class for show target panel.
$(document).ready(function(){
  var activeTab = getUrlVars()["activeTab"];
  if(activeTab !== undefined){
    $('.tab_pane').removeClass('active');
    $('.tab_pane').eq(activeTab).addClass('active');
  }
})

// When click pagination item, redirects target page with index of active tab.
$('a.paginate_link').on('click', function(e){
   e.preventDefault(0);
   var clickedItemValue = $(this).data('page')
   var activeTabIndex = $('.tab_pane.active').index();
   window.location.href = 'http://www.example.com?page='+ activeTabIndex +'&activeTab=' + activeTabIndex;
});

当点击分页项的链接时，找到活动标签索引号。（在上面的代码中，这是通过 jQuery 生成的，您必须通过 href="javascript:;" 禁用分页单击）稍后，将带有附加 activeTab 值的页面重定向到您的完整 url。
页面重定向之后... 现在，我们知道（通过 getUrlVars() 方法）通过当前页面 url 上的 activeTab 上一页的活动选项卡的索引号。因此，首先我们将删除选项卡面板上的所有“活动”类。比我们将在加载页面上添加“活动”类仅目标选项卡面板项。

【讨论】：

对不起，我看不懂代码。你能解释一下吗？谢谢。