I have a page where it will display the details that is in my database in a form of a table, I am doing a filtering so when the list gets very long at least it can split up into different pages instead of user scrolling through, but I tried and nothing came out, not sure if I am doing correctly or not.

This is what I wanted as shown in the picture below but it is not displaying.

ViewMCO.html

    {% extends "customerbase.html" %}
    {% block content %}
    <style>
    table {
        border-collapse:separate;
        border:solid black 1px;
        border-radius:6px;
        -moz-border-radius:6px;
    }
    
    td, th {
        border-left:solid black 1px;
        border-top:solid black 1px;
    }
    
    th {
        border-top: none;
    }
    
    td:first-child, th:first-child {
         border-left: none;
    }

    
    
    
    </style>
    <script>
      
    
     // Function to download table data into csv file
            function download_table_as_csv(table_id, separator = ',') {
                var rows = document.querySelectorAll('table#'   table_id   ' tr');
                var csv = [];
                for (var i = 0; i < rows.length; i  ) {
                    var row = [], cols = rows[i].querySelectorAll('td, th');
                    for (var j = 0; j < cols.length; j  ) {
                        var data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, '').replace(/(\s\s)/gm, ' ')
                        data = data.replace(/"/g, '""');
                        row.push('"'   data   '"');
                    }
                    csv.push(row.join(separator));
                }
                var csv_string = csv.join('\n');
                var filename = 'export_'   table_id   '_'   new Date().toLocaleDateString()   '.csv';
                var link = document.createElement('a');
                link.style.display = 'none';
                link.setAttribute('target', '_blank');
                link.setAttribute('href', 'data:text/csv;charset=utf-8,'   encodeURIComponent(csv_string));
                link.setAttribute('download', filename);
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            };
    
    </script>
    
    
       <div style="padding-left:16px">
         <br>
    
    
     <div class="form-block">
         <h6>Search for Part Number/ Serial Number/ Reception Number/ MCO Number/ Customer Name/ Status</h6>
        <form class="form-inline my-2 my-lg-0" action="{% url 'ViewMCO' %}" method='GET' value='{{ request.GET.q }}'>
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" name="q" value='{{ request.GET.q }}'/>
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
         <br>
       <table id="viewTable" class="m-2">
            <i class="fa fa-download" aria-hidden="true"></i>
                <a href="#" onclick="download_table_as_csv('viewTable');">Download as CSV</a>
           <br>
    
      <tr class="header">
        <th>Latest Log</th>
          <th>Part Number</th>
          <th>Serial Number</th>
          <th>Reception Number</th>
          <th>MCO Number</th>
          <th>Customer Name</th>
          <th>Status</th>
          <th>Action</th>
      </tr>
             {% for photo in allusername %}
    
    
      <tr>
            <td>{{photo.Datetime}}</td>
          <td>{{photo.partno}}</td>
          <td>{{photo.serialno}}</td>
          <td>{{photo.reception}}</td>
          <td>{{photo.mcoNum}}</td>
          <td>{{photo.Customername}}</td>
          <td>{{photo.status}}</td>


          <td>
          <form action="{% url 'customerdetails' photo.id %}" method="post">
              {% csrf_token %}
          <button type="submit" class="btn btn-sm btn-info">View</button>
          </form>
          </td>
      </tr>
    
    {% endfor %}
    
    </table>
         <br>
    {% if allusername.has_other_pages %}
  <ul class="pagination">
    {% if allusername.has_previous %}
      <li><a href="?page={{ allusername.previous_page_number }}">&laquo;</a></li>
    {% else %}
      <li class="disabled"><span>&laquo;</span></li>
    {% endif %}
    {% for i in allusername.paginator.page_range %}
      {% if allusername.number == i %}
        <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
      {% else %}
        <li><a href="?page={{ i }}">{{ i }}</a></li>
      {% endif %}
    {% endfor %}
    {% if allusername.has_next %}
      <li><a href="?page={{ allusername.next_page_number }}">&raquo;</a></li>
    {% else %}
      <li class="disabled"><span>&raquo;</span></li>
    {% endif %}
    </ul>
    {% endif %}

    
    
    </div>
       </div>

{% endblock %}

views.py

@login_required()
def ViewMCO(request):
    search_post = request.GET.get('q')
    if (search_post is not None) and search_post:
        allusername = Photo.objects.filter(Q(reception__icontains=search_post) | Q(partno__icontains=search_post) | Q(
            Customername__icontains=search_post) | Q(mcoNum__icontains=search_post) | Q(status__icontains=search_post)
                                           | Q(serialno__icontains=search_post))
        if not allusername:
            allusername = Photo.objects.all().order_by("-Datetime")

    else:
        allusername = Photo.objects.all().order_by("-Datetime")
        page = request.GET.get('page', 1)
        paginator = Paginator(allusername, 10)
        try:
            allusername = paginator.page(page)
        except PageNotAnInteger:
            allusername = paginator.page(1)
        except EmptyPage:
            allusername = paginator.page(paginator.num_pages)



    context = {'allusername': allusername}
    return render(request, 'ViewMCO.html', context)

CodePudding user response：

in your views.py there is a problem of indentation and you should pass the search_post in the template

@login_required()
def ViewMCO(request):
    search_post = request.GET.get('q')
    if (search_post is not None) and search_post:
        allusername = Photo.objects.filter(Q(reception__icontains=search_post) | Q(partno__icontains=search_post) | Q(
            Customername__icontains=search_post) | Q(mcoNum__icontains=search_post) | Q(status__icontains=search_post)
                                           | Q(serialno__icontains=search_post))
        if not allusername:
            allusername = Photo.objects.all().order_by("-Datetime")
        page = request.GET.get('page')
        paginator = Paginator(allusername, 10)
        try:
            allusername = paginator.page(page)
        except PageNotAnInteger:
            allusername = paginator.page(1)
        except EmptyPage:
            allusername = paginator.page(paginator.num_pages)



        context = {'allusername': allusername,'query':search_post}
        return render(request, 'ViewMCO.html', context)
    else:#if search_post is None 
        return redirect('somewhere')
   

and now in your template there is work to do.
change this

 {% if allusername.has_other_pages %}
  <ul class="pagination">
    {% if allusername.has_previous %}
      <li><a href="?page={{ allusername.previous_page_number }}">&laquo;</a></li>
    {% else %}
      <li class="disabled"><span>&laquo;</span></li>
    {% endif %}
    {% for i in allusername.paginator.page_range %}
      {% if allusername.number == i %}
        <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
      {% else %}
        <li><a href="?page={{ i }}">{{ i }}</a></li>
      {% endif %}
    {% endfor %}
    {% if allusername.has_next %}
      <li><a href="?page={{ allusername.next_page_number }}">&raquo;</a></li>
    {% else %}
      <li class="disabled"><span>&raquo;</span></li>
    {% endif %}
    </ul>
    {% endif %}

to

 {% if allusername.has_other_pages %}
  <ul class="pagination">
    {% if allusername.has_previous %}
      <li><a href="?q={{ query|urlencode }}&page={{ allusername.previous_page_number }}">&laquo;</a></li>
    {% else %}
      <li class="disabled"><span>&laquo;</span></li>
    {% endif %}
    {% for i in allusername.paginator.page_range %}
      {% if allusername.number == i %}
        <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
      {% else %}
        <li><a href="?q={{ query|urlencode }}&page={{ i }}">{{ i }}</a></li>
      {% endif %}
    {% endfor %}
    {% if allusername.has_next %}
      <li><a href="?q={{ query|urlencode }}&page={{ allusername.next_page_number }}">&raquo;</a></li>
    {% else %}
      <li class="disabled"><span>&raquo;</span></li>
    {% endif %}
    </ul>
    {% endif %}

what i change in the pagination is that i passed the 'query' in the template and i use urlencode.