如何使用django-tables2根据用户输入实现列的隐藏与显示？

Absolutely! You can absolutely pull this off with django-tables2—you don’t have to rely entirely on JavaScript, though a tiny bit of client-side code will make the user experience way smoother. Let me walk you through the steps to make this work:

Start by setting up your table in tables.py, marking columns you want hidden by default with visible=False. Default visible columns can omit this setting (since visible=True is the default):

import django_tables2 as tables
from .models import YourModel

class YourTable(tables.Table):
    # Default visible columns
    id = tables.Column()
    name = tables.Column()
    # Optional columns (hidden by default)
    email = tables.Column(visible=False, verbose_name="Email Address")
    phone = tables.Column(visible=False)
    address = tables.Column(visible=False)

    class Meta:
        model = YourModel
        template_name = "django_tables2/bootstrap.html" # Bootstrap template makes styling easier

In your view, fetch the list of optional (hidden-by-default) columns and pass it along with your table object to the template:

from django.shortcuts import render
from .tables import YourTable
from .models import YourModel

def your_table_view(request):
    queryset = YourModel.objects.all()
    table = YourTable(queryset)
    
    # Grab columns that are hidden by default for the frontend controls
    optional_columns = [
        {"name": col.name, "label": col.verbose_name}
        for col in table.columns
        if not col.visible
    ]
    
    return render(request, "your_template.html", {
        "table_all": table,
        "optional_columns": optional_columns
    })

Render checkboxes (or a dropdown) for optional columns, then add the table and a tiny bit of JS to toggle column visibility in real-time:

<!-- Optional Column Toggle Section -->
<div class="mb-4">
    <h5>Show Additional Columns</h5>
    {% for col in optional_columns %}
        <div class="form-check form-check-inline">
            <input class="form-check-input column-toggle" type="checkbox" 
                   id="toggle-{{ col.name }}" data-column="{{ col.name }}">
            <label class="form-check-label" for="toggle-{{ col.name }}">
                {{ col.label }}
            </label>
        </div>
    {% endfor %}
</div>

<!-- Render the django-tables2 table -->
{% render_table table_all %}

<!-- JS to Toggle Column Visibility -->
<script>
    // Listen for checkbox changes to show/hide columns
    document.querySelectorAll('.column-toggle').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const columnClass = this.dataset.column;
            // Target all header and data cells for the column
            const columnElements = document.querySelectorAll(`th.${columnClass}, td.${columnClass}`);
            
            columnElements.forEach(el => {
                el.style.display = this.checked ? '' : 'none';
            });
        });
    });
</script>

If you want users' column selections to stick after page reloads, add a bit more JS to save preferences in localStorage:

// Restore saved selections on page load
document.addEventListener('DOMContentLoaded', () => {
    const savedColumns = JSON.parse(localStorage.getItem('visible_table_columns') || '[]');
    savedColumns.forEach(colName => {
        const checkbox = document.getElementById(`toggle-${colName}`);
        if (checkbox) {
            checkbox.checked = true;
            checkbox.dispatchEvent(new Event('change'));
        }
    });
});

// Save selections when checkboxes are toggled
document.querySelectorAll('.column-toggle').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const colName = this.dataset.column;
        let savedColumns = JSON.parse(localStorage.getItem('visible_table_columns') || '[]');
        
        if (this.checked) {
            savedColumns.push(colName);
        } else {
            savedColumns = savedColumns.filter(col => col !== colName);
        }
        
        localStorage.setItem('visible_table_columns', JSON.stringify(savedColumns));
        
        // Existing visibility toggle logic
        const columnElements = document.querySelectorAll(`th.${colName}, td.${colName}`);
        columnElements.forEach(el => {
            el.style.display = this.checked ? '' : 'none';
        });
    });
});

If you want to avoid JS entirely, you can submit the selected columns via a form to your view, then dynamically set table.columns[col_name].visible = True before rendering the table. This works but requires a page refresh, which is less user-friendly than the real-time JS toggle.

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