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

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

0 голосов
/ 08 июня 2018

У меня есть две следующие вкладки, где соответствующие данные вкладки разбиты на страницы.Нумерация страниц работает нормально, когда я на первой вкладке.Но когда я перехожу на вторую вкладку и пытаюсь выполнить разбиение на страницы, я перехожу на первую вкладку.

Может ли кто-нибудь помочь мне с этим, как я могу оставаться на выбранной вкладке, пока я прохожу страницы этойконкретная вкладка?

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>

Пожалуйста, помогите мне с этим,Спасибо.

1 Ответ

0 голосов
/ 08 июня 2018

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

...