Question

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

有人可以帮我解决这个问题，在浏览特定标签的页面时，如何留在选定的标签中？

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>

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

Answer 1

您可以使用网址移动有效标签索引。

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

Paginate 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＆amp; 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值到你的完整网址。
比页面重定向... 现在，我们知道（通过getUrlVars（）方法）通过当前页面url上的activeTab在上一页的活动选项卡的索引号。首先，我们将删除选项卡面板上的所有“活动”类。我们将在加载的页面上添加“活动”类目标选项卡面板项。

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

1 个答案: