我有两个以下选项卡，其中选项卡各自的数据被分页。当我在第一个选项卡中时，分页工作正常。但是当我转到第二个选项卡并尝试分页时，它会将我带到第一个选项卡。
任何人都可以帮我解决这个问题，当我浏览该特定选项卡的页面时，我如何留在所选选项卡中？
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,
];
}
网页部分：
<!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>
请帮我解决这个问题。谢谢。
您可以使用 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在上一页的活动选项卡的索引号。因此，首先我们将删除选项卡面板上的所有"活动"类。然后我们将在加载的页面上添加"活动"类仅目标选项卡面板项。