需要jquery来搜索所有页面上的数据并显示，而不是只在页面上显示数据

Need jquery to search data on all pages and display rather than data only on page

本文关键字：数据 显示 jquery 搜索 需要      更新时间：2023-09-26

我的问题是，当我使用jquery在我的网站上搜索时，它只在当前显示的页面上搜索，我希望它搜索我的所有数据，然后相应地显示在页面上，大约有260万个条目。我使用核心django分页器进行分页，并使用简单的jquery和ajax进行搜索工具。请帮忙！

我的观点是：

def tissues(request):
    contact_list = TissueTable.objects.all()
    paginator = Paginator(contact_list, 100) # Show 25 contacts per page
    page = request.GET.get('page')
    try:
        contacts = paginator.page(page)
    except PageNotAnInteger:
        # If page is not an integer, deliver first page.
        contacts = paginator.page(1)
    except EmptyPage:
        # If page is out of range (e.g. 9999), deliver last page of results.
        contacts = paginator.page(paginator.num_pages)
    return render(request, '.html', {'contacts': contacts})

这是我的两个模板，base和home，base.html：

<html>
  <head>
<title>Animal NGS DATA</font></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $('a[rel="external"]').attr('target', '_blank');
</script>
<style>
th
{
border-bottom: 1px solid #d6d6d6;
}
tr:nth-child(even)
{
background:#e9e9e9;
}
</style>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1 left>NGS CUFFLINK'S DATA</h1>
  </div>
  <div data-role="main" class="ui-content">
    <form>
      <input id="filterTable-input" data-type="search" placeholder="Search Tissue Data...">
    </form>
    <table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable" data-filter="true" data-input="#filterTable-input">
  </head>
  <body>
<map title="Navigation Bar">
<P>
<a href = "http://127.0.0.1:8000/" rel="external"style="display:block;">NGS Data</a>
<a href= "http://127.0.0.1:8000/genes/" rel="external"style="display:block;">Genes</a>
<a href = "http://127.0.0.1:8000/experiment/"rel="external"style="display:block;">Experiment</a>
<a href = "http://127.0.0.1:8000/organisms/"rel="external"style="display:block;">Organisms</a>
<a href = "http://127.0.0.1:8000/tissues/"rel="external"style="display:block;">Tissue Data</a>
</P>
        </map>
    <h1><font color='red'>Tissue Data</font></h1>
     {% block content %}
    {% endblock %}
  </body>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'myapp/style.css' %}" />
</html>

和我的家.html

{% extends "tissues/base.html" %}
{% block content %}
    <!--<table id='table' data-mode="columntoggle" border = '10' bordercolor = 'mahogany'>-->
<div class="pagination">
    <span class="step-links">
        {% if contacts.has_previous %}
            <a href="?page={{ contacts.previous_page_number }}">previous</a>
        {% endif %}
        <span class="current">
            Page {{ contacts.number }} of {{ contacts.paginator.num_pages }}.
        </span>
        {% if contacts.has_next %}
            <a href="?page={{ contacts.next_page_number }}">next</a>
        {% endif %}
    </span>
</div>
<table data-role="table"  id="myTable" class="ui-responsive ui-shadow" data-filter="true" data-input="#filterTable-input" bgcolor = 'cyan'>
<thead> 
<tr bgcolor = 'pink'>
      <th>Tissue ID</th>
      <th>Tissue Term</th>
      <th>Definition</th>
    </tr>
<thead>
<tbody>
    {% for b in contacts.object_list%}
    <tr>
      <td>{{b.tissue_id}}</td>
      <td>{{b.tissue_term}}</td>
      <td>{{b.definition}}</td>
    </tr>
    {% endfor %}
    </table>
<div class="pagination">
    <span class="step-links">
        {% if contacts.has_previous %}
            <a href="?page={{ contacts.previous_page_number }}">previous</a>
        {% endif %}
        <span class="current">
            Page {{ contacts.number }} of {{ contacts.paginator.num_pages }}.
        </span>
        {% if contacts.has_next %}
            <a href="?page={{ contacts.next_page_number }}">next</a>
        {% endif %}
    </span>
</div>
{% endblock %}

看起来您需要单独的视图功能，并通过ajax单独交付结果。可能是这样的：

def ajax_activity_objects_search(request):
    search_phrase = request.GET.get('q')
    matched = ActivityObject.objects.filter(
        address__icontains=search_phrase,
    )
    response = ''
    for act_object in matched:
        response += '<option value="' + str(act_object.id) + '">' '
                    + act_object.address + '</option>'
    return HttpResponse(response)
相关文章：