title: python pagination and search query on html
body: <p>I am new to <strong>django</strong>.</p>
  
  <p>I have a django template that renders mongodb values and accordingly paints the html. I am using pagination and search to display records.</p>
  
  <p><strong>Problem: How should I query search input in my html to display all the records which is currently masked with pagination in django.</strong></p>
  
  <p><em>This is how it looks with pagination.</em></p>
  
  <p><a href="https://i.stack.imgur.com/Oe3Dp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Oe3Dp.png" alt="Pagination Search"></a></p>
  
  <p><em>And this is how I want to display with pagination</em></p>
  
  <p><a href="https://i.stack.imgur.com/NQqCw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NQqCw.png" alt="enter image description here"></a></p>
  
  <p><em>This is my code:</em></p>
  
  <pre><code>def index(request):
     values = data.find()
     paginator = Paginator(values, 12)
     page = request.GET.get('page')
     try:
        listItem = paginator.page(page) 
     except PageNotAnInteger:
        listItem = paginator.page(1)
     except EmptyPage:
        listItem = paginator.page(paginator.num_pages)    
     return render(request, 'product.html', {"values":values, "listItem":listItem})
  </code></pre>
  
  <p><em>This is my html</em></p>
  
  <pre><code>{% block content %}
  &lt;ul class="row catalog-list"&gt;
      {% for value in values %}
      &lt;li class="col-xs-12 col-sm-6 col-md-4 col-lg-4"&gt;
          &lt;div&gt;
             &lt;img src={{value.image_url_medium}}&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;h4 class="ellipsis-text catalog-item-name" tooltip={{value.name}}&gt;{{value.name}}&lt;/h4&gt;
              &lt;h5&gt;Product Id: {{value.id_product}}&lt;/h5&gt;
              &lt;h5&gt;Category: {{value.catagory}}&lt;/h5&gt;
              &lt;h5&gt;Best Price: {{value.best_price}}&lt;/h5&gt;
              &lt;h5&gt;Best Price Vendor: {{value.best_price_vendor}}&lt;/h5&gt;
              &lt;h5 class="ellipsis-text"&gt;Link:
                 &lt;a href={{value.best_price_vendor_url}}&gt;{{value.best_price_vendor_url}}&lt;/a&gt;
             &lt;/h5&gt;
          &lt;/div&gt;
       &lt;/li&gt;
      {% endfor %}
  &lt;/ul&gt;
  &lt;ul class="pagination"&gt;        
      &lt;li class="step-links"&gt;
         {% if listItem.has_previous %}
         &lt;a href="?page={{ listItem.previous_page_number }}"&gt;Previous&lt;/a&gt;
         {% endif %}
          &lt;span class="current"&gt;
                      Page {{ listItem.number }} of {{ listItem.paginator.num_pages }}.
          &lt;/span&gt;
          {% if listItem.has_next %}
          &lt;a href="?page={{ listItem.next_page_number }}"&gt;Next&lt;/a&gt;
          {% endif %}
       &lt;/li&gt;
   &lt;/ul&gt;  
   {% endblock %}
  </code></pre>
  
  <p><em>and jQuery:</em></p>
  
  <pre><code>$itemList = $('.catalog-list li');
  console.log($itemList.length); //Prints 12 
  $("#filter").keyup(function(){
      var filter = $(this).val();
      if(filter==null){
          $itemList.hide();
          return;
      }
      var regex = new RegExp(filter, "i");
      $itemList.each(function(){
          if ($(this).find('h4').text().search(regex) &lt; 0 &amp;&amp; $(this).find('h5').text().search(regex) &lt; 0) {
              $(this).hide();
          } else {
              $(this).show();
          }
      });
  });
  </code></pre>