Question

我是 django 的新手。

我有一个django模板，可以呈现mongodb值并相应地绘制html。我正在使用分页和搜索来显示记录。

问题：如何在html中查询搜索输入，以显示当前在django中使用分页屏蔽的所有记录。

这就是它的分页效果。

这就是我想用分页显示的方式

这是我的代码：

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})

这是我的HTML

{% block content %}
<ul class="row catalog-list">
    {% for value in values %}
    <li class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <div>
           <img src={{value.image_url_medium}}>
        </div>
        <div>
            <h4 class="ellipsis-text catalog-item-name" tooltip={{value.name}}>{{value.name}}</h4>
            <h5>Product Id: {{value.id_product}}</h5>
            <h5>Category: {{value.catagory}}</h5>
            <h5>Best Price: {{value.best_price}}</h5>
            <h5>Best Price Vendor: {{value.best_price_vendor}}</h5>
            <h5 class="ellipsis-text">Link:
               <a href={{value.best_price_vendor_url}}>{{value.best_price_vendor_url}}</a>
           </h5>
        </div>
     </li>
    {% endfor %}
</ul>
<ul class="pagination">        
    <li class="step-links">
       {% if listItem.has_previous %}
       <a href="?page={{ listItem.previous_page_number }}">Previous</a>
       {% endif %}
        <span class="current">
                    Page {{ listItem.number }} of {{ listItem.paginator.num_pages }}.
        </span>
        {% if listItem.has_next %}
        <a href="?page={{ listItem.next_page_number }}">Next</a>
        {% endif %}
     </li>
 </ul>  
 {% endblock %}

和jQuery：

$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) < 0 && $(this).find('h5').text().search(regex) < 0) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

Answer 1

那时候我是django的新手。它实际上非常简单。

views.py

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

register = template.Library()
port = 27017
client = MongoClient(port=port)

def people(request):
    values = client.sdkUserIdDB.userIdColl.find() #getting all values from a database.
    paginator = Paginator(values, 12) #putting all the values as a 12 slice so each page as 12 items from database.
    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, 'page.html', {"listItem":listItem})

templates > page.html

<ul class="pagination">
  <li class="step-links">
    {% if listItem.has_previous %}
    <a href="?page={{ listItem.previous_page_number }}" class="pagination-previous">Previous</a>
    {% endif %}
    <span class="current">Page {{ listItem.number }} of {{ listItem.paginator.num_pages }}.</span>
    {% if listItem.has_next %}
    <a href="?page={{ listItem.next_page_number }}" class="pagination-next">Next</a>
    {% endif %}
  </li>

</ul>

在html上进行python分页和搜索查询

1 个答案: