Как я могу оставаться в выбранной вкладке при разбиении на страницы

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>

Пожалуйста, помогите мне с этим. Благодарю.

0

bootstrap-4 bootstrap-tabs pagination php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы можете перемещать индекс активной вкладки с помощью URL.

Пример, (я не тестировал следующие коды)

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 & 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 ()) порядковый номер активной вкладки на предыдущей странице через activeTab на URL текущей страницы. Поэтому сначала мы удалим все «активные» классы на вкладках. Затем мы добавим «активный» класс только целевой панели панели вкладок на загруженной странице.

0