如何处理Django分页与Bootstrap4嵌套标签的页面跳转问题

First, let's resolve the tab state issue when using pagination—you're absolutely right that we need to carry the active tab's ID in the GET request to maintain state across page reloads. Here's how to implement it step by step:

Step 1: Track Active Tab in the View #

Modify your view to capture the active_tab parameter from the URL (defaulting to your overview tab if it's not present):

from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage

def viewable(request):
    # Capture active tab from GET request, default to overview tab ID
    active_tab = request.GET.get('active_tab', 'overview-tab')
    
    if request.method == 'GET':
        page = request.GET.get('page', 1)
        strings = ['a','b','c']  # Replace with your actual 2000 entries
        stringspaginator = Paginator(strings, 100)
        
        try:
            strings = stringspaginator.page(page)
        except PageNotAnInteger:
            strings = stringspaginator.page(1)
        except EmptyPage:
            strings = stringspaginator.page(stringspaginator.num_pages)
    
    # Group related data into dictionaries for cleaner context (optional but recommended)
    context = {
        'metadata': metadata,
        'file_data': {
            'created': files_created,
            'deleted': files_deleted,
            'folders_created': folders_created
        },
        'registry_data': {
            'written': registry_written,
            'deleted': registry_deleted
        },
        'network_data': {
            'http': http,
            'tcp': tcp,
            'udp': udp
        },
        'analysis_data': {
            'positives': positives,
            'negatives': negatives,
            'libs': libs
        },
        'strings': strings,
        'active_tab': active_tab
    }
    
    return render(request, 'viewable.html', context)

Step 2: Update Pagination Links to Include Active Tab #

Modify your pagination template to append the active_tab parameter to all pagination URLs:

<nav aria-label="Page navigation">
 {% if strings.has_other_pages %}
 <ul class="pagination justify-content-center pagination-lg">
 {% if strings.has_previous %}
 <li class="page-item"><a class="page-link" href="?page=1&active_tab={{ active_tab }}">First</a>
 </li>
 {% endif %}
 {% for i in strings.paginator.page_range %}
 {% if strings.number == i %}
 <li class="page-item active"><a class="page-link" href="?page={{ i }}&active_tab={{ active_tab }}">{{ i }}</a></li>
 {% elif i > strings.number|add:'-3' and i < strings.number|add:'3' %}
 <li class="page-item"><a class="page-link" href="?page={{ i }}&active_tab={{ active_tab }}">{{ i }}</a></li>
 {% endif %}
 {% endfor %}
 {% if strings.has_next %}
 <li class="page-item"><a class="page-link" href="?page={{ strings.paginator.num_pages }}&active_tab={{ active_tab }}">Last</a>
 </li>
 {% endif %}
 </ul>
 {% endif %}
</nav>

Step 3: Set Active Tab in Template Markup #

Update your tab panes and nav links to use the active_tab variable to set the active state:

Tab Links (Nav Items): #

<ul class="nav nav-tabs" id="nav-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link {% if active_tab == 'overview-tab' %}active{% endif %}" id="overview-tab-link" data-toggle="tab" href="#overview-tab" role="tab">Overview</a>
  </li>
  <li class="nav-item">
    <a class="nav-link {% if active_tab == 'files-tab' %}active{% endif %}" id="files-tab-link" data-toggle="tab" href="#files-tab" role="tab">Files</a>
  </li>
  <!-- Repeat for all your tabs, updating the tab ID and condition -->
</ul>

Tab Panes: #

<div class="tab-content" id="nav-tabContent">
  <!-- OVERVIEW TAB -->
  <div class="tab-pane fade {% if active_tab == 'overview-tab' %}show active{% endif %}" id="overview-tab" role="tabpanel">
    <!-- Your overview table + pagination -->
  </div>
  
  <!-- FILES TAB -->
  <div class="tab-pane fade {% if active_tab == 'files-tab' %}show active{% endif %}" id="files-tab" role="tabpanel">
    <!-- Your files table + pagination -->
  </div>
  
  <!-- Repeat for all your tabs, updating the tab ID and condition -->
</div>

Step 4: Update URL on Tab Switch (JavaScript) #

Add this small script to your template to update the URL's query parameter when the user switches tabs—this ensures that if they refresh the page without using pagination, they stay on the current tab:

<script>
  // Update URL query parameter when tab is clicked
  $('.nav-link').on('click', function() {
    const tabId = $(this).attr('href').slice(1); // Remove the leading #
    const url = new URL(window.location);
    url.searchParams.set('active_tab', tabId);
    window.history.pushState({}, '', url);
  });
</script>

Bonus: Optimizing Data Passing #

As you noticed, passing dozens of individual variables to the template gets messy. Grouping related data into dictionaries (like I did in the view example above) makes your context more organized and easier to maintain. In the template, you can access grouped data like this:

<!-- Example: Accessing file creation data -->
<p>Files Created: {{ file_data.created }}</p>

This approach also scales better if you add more data points later—you just add them to the relevant dictionary instead of cluttering the context with new variables.

内容的提问来源于stack exchange，提问作者Tayyab