How to create a filter a column in a data table in Django?

I have a data table in my Django project. This data table is for listing customers. The customer has attributes like name, country, email, etc… I want to put a button like a dropdown menu for listing countries of customers. (Excel-like or similar logic) But I just need this in the country column. How can I do that?

I try to use django-filters but didn’t work.

customer_list.html

{% extends "layouts/base.html" %}

{% block title %} Customer List {% endblock %}

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    <div class="content">
        <div class="page-inner">
            <div class="page-header">
                <div class="row">
                    <div class="col">
                        <h4 class="page-title">Customer List</h4>
                    </div>

                    <div class="col">
                        <a href="/customer">
                            <button class="btn btn-primary btn-round" style="">Add new customer</button>
                        </a>
                    </div>
            </div>

            </div>

            <div class="row">


                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">My Customers</h4>
                        </div>


                        <div class="card-body">
                            <div class="table-responsive">
                            <form method="get">
                                {{ myFilter.form.as_p }}
                                <button class="btn btn-primary" type="submit">Filter</button>
                            </form>
                                <table id="multi-filter-select" class="display table table-striped table-hover grid_" >
                                    <thead>
                                        <tr>
                                            <!-- class="filter" -->
                                            <th index="0">Customer Name</th>
                                            <th>Country</th>
                                            <th>E-Mail</th>
                                            <th>Phone</th>
                                            <th>VAT Number</th>
                                            <th>Operations</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <th>Customer Name</th>
                                            <th>Country</th>
                                            <th>E-Mail</th>
                                            <th>Phone</th>
                                            <th>VAT Number</th>
                                            <th>Quick Operations</th>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                    {% for customer in customer_list %}
                                        <tr>
                                            <td>{{customer.customer_name}}</td>
                                            <td>{{customer.country}}</td>
                                            <td>{{customer.email}}</td>
                                            <td>{{customer.telephone}}</td>
                                            <td>{{customer.VATnumber}}</td>
                                            <td>
                                                <div class="row">
                                                    <a href="/customers/{{ customer.id }}/profile" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" title="View Customer" ><i class="fas fa-eye"></i></a>
                                                    <a href="/customers/{{ customer.id }}/update" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" title="Update Info" ><i class="fas fa-edit"></i></a>
                                                    <a href="/pdfs/{{ customer.id }}/list" class="btn btn-outline-primary btn-sm"><i class="fas fa-chart-line" data-toggle="tooltip" title="View Analyses" ></i></a>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


<style>
/* Styles go here */

table thead tr td{
  background-color : gray;
  min-width : 100px;
  position: relative;
}

.filter{
  position: relative;
  border: solid 1px;
  top : 20px;
  background-color : red;
  width:100px;
  right:0;
}
</style>


{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}


    <script src="/static/assets/js/setting-demo2.js"></script>
    <script>$('#basic-datatables').DataTable();

    $('#multi-filter-select').DataTable( {
    "pageLength": 5,
    initComplete: function () {
        this.api().columns().every( function () {
            var column = this;
            var select = $('')
            .appendTo( $(column.footer()).empty() )
            .on( 'change', function () {
                var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val()
                    );

                column
                .search( val ? '^'+val+'$' : '', true, false )
                .draw();
            } );

            column.data().unique().sort().each( function ( d, j ) {
                select.append( ''+d+'' )
            } );
        } );
    }
});
</script>
<script>






</script>

{% endblock javascripts %}

views.py

def customer_list(request):
    current_user = request.user
    userP = UserProfile.objects.get_or_create(username=current_user)
    customer_list = Customer.objects.filter(company=userP[0].company.comp_name)
    myFilter = TableFilter(request.GET, queryset=customer_list.all())


    context = {
        'customer_list': customer_list,
        'myFilter': myFilter

    }
    return render(request, 'customer_list.html', context)

filters.py

import django_filters
from .models import *


class TableFilter(django_filters.FilterSet):
    class Meta:
        model = Customer
        fields = 'country',

Answer

It’s apparent that the code that you have posted is only part of the code and so it’s not possible to see all the issues that may prevent it from working, part of the problem is that the fields parameter in your filters.py should have square brackets and no comma. It should read:

fields = ['country']