asked on

How to stay active in the selected tab while paginating through the pages?

I've two following tabs where tab's respective data is paginated. The pagination works OK when I am in the first tab. But when I goto second tab and try to paginate, it takes me to the first tab.

Can you please help me with this, how can I stay in the selected tab while I am going through the pages of that particular tab?

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>

Thanks

Swatantra Bhargava

Make a new class i.e. selectedPage and made the following changes.

$pagination .= '<li class="page-item"><button type="button" class="btn btn-default selectedPage">' . $i . '</button></li>';

Open in new window

Swatantra Bhargava

@ss ch

Please select an appropriate answer and close the question.

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.