How can I keep stay in the selected tab while paginating

Question

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 anybody 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 part:

<?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 Part:

<!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>

Please help me with this. Thanks.

@AmrBerag, Please check that I added a PHP part. I didn't have any JavaScript used yet. — phpseeker, Jun 09 '18 at 00:50

FGDeveloper · Answer 1 · 2018-06-09T10:31:26.457

You can move active tab index with url.

Example, (I didn't test following codes)

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;
});

When click to link of pagination item, find active tab index number. (At the above codes this makes via jQuery and you must disable pagination click via href="javascript:;") later than, redirect page with append activeTab value to your full url.
After than page redirect... Now, for we know (via getUrlVars() method) index number of active tab at previous page via activeTab on the current page url. So first we will remove all "active" class at tab panels. Than we will add "active" class only target tab panel item on loaded page.

Sorry I don't understand the code. Can you please explain a bit more? Thanks. — phpseeker, Jun 09 '18 at 00:52

How can I keep stay in the selected tab while paginating

1 Answers1