对搜索结果的查询集进行排序并通过 ajax 呈现

Posted 2023-02-24

【中文标题】对搜索结果的查询集进行排序并通过 ajax 呈现

【英文标题】：Sorting queryset of search result and render back thru ajax

【发布时间】：2013-01-25 02:47:25

【问题描述】：

我遇到了这个问题：我有一个搜索结果页面，其中有几个结果。我希望用户能够根据某些标准对结果进行排序。我在 AJAX 中这样做。问题是如何将来自服务器的排序数据再次渲染到字段。

function sort()
    var sortid = $('#sort').val();
    $.ajax(
        type: "POST",
        url: "/sort/",
        data:  sortid: sortid ,
    ).done(function(data)
        // how to render this sorted 'data' back to <td>s?  
    );

这是我的绑定代码：

<select onchange="sort()" id="sort">   
    <option>price</option>
    <option>rate</option>
</select>

这是结果的地方：

<tr class="result">
    <td>
        <li>loc.locationname</li>
    </td>
    <td>    
        <li>loc.rating</li>
    </td>
    <td>
        <li>loc.price</li>
    </td>
</tr>

【问题讨论】：

你的ajax调用的结果是什么？

@Chris，来自服务器的排序查询集。我只想知道如何渲染回td's

@RoryMcCrossan，很容易在我的代码中看到这一点：<option>price</option> <option>rate</option>

@doniyor 是的，我刚刚看到了。顺便说一句，您的 html 无效 - 您只能在 ol 或 ul 中包含 li 元素，而不是 td。

@RoryMcCrossan，是的，谢谢，我知道，但这不是问题所在。

【参考方案1】：

您的视图可以返回一个渲染的 sn-p，就像您可以在客户端渲染到一个 div 中一样

您的 ajax 调用可能如下所示

function sort()
    var sortid = $('#sort').val();
    $.ajax(
        type: "POST",
        url: "/sort/",
        data:  sortid: sortid ,
    ).done(function(data)
         $('#results-div').html(data.html);
    );

示例视图

import json
from django.shortcuts import HttpResponse
from django.template import loader, RequestContext


def my_view(request, query=None):
    # trivialized example

    sortid = request.REQUEST.get('sortid')

    # you might want to store the results into cache 
    results = MyModel.objects.filter(name__icontains=query).order_by(sortid)

    if request.is_ajax():
       t = loader.get_template('search_results.html')
       html = t.render(RequestContext('results': results))
       return HttpResponse(json.dumps('html': html))
    # handle the other cases here 

在search_results.html 内部，您只需将结果呈现到您的表格中

% for loc in results %
<tr class="result">
    <td>
        <li>loc.locationname</li>
    </td>
    <td>    
        <li>loc.rating</li>
    </td>
    <td>
        <li>loc.price</li>
    </td>
</tr>
% endfor % 

【讨论】：

谢谢，这应该可以。但这与render_to_response 没有什么不同，

【参考方案2】：

 function(data)
   var tablehtml='<tbody>'
   $.each(data,function(i,res) 
       tablehtml+='<tr class="result">'+
                   '<td><li>'+res.locationname+'</li></td>'+
                   //...
       );
    $("table").html(tablehtml+'</tbody'>)
    

nb：我添加了 tbody 标记，因为如果 html 包含在单个父级中，则这种添加 html 的方式比它是一个（长）节点列表要快得多

euh... 编辑，但要使用它，您需要在 .ajax 中告知您期待 json 响应 (datatype:'json')，但现在情况并非如此

您还需要从服务器发送一个特定的标头（“content-type:application/json”）

如果你坚持发送 html 然后在服务器端解析数据（包装它）并在回调中立即附加它

如果你想重新考虑你的排序功能概念，如果数据不是那么大&如果你可以 gzip；我会立即加载所有数据并在 js 中进行排序（不再需要服务器调用该功能对用户来说会更快：页面加载等待时间稍长，但之后会立即排序

【讨论】：

我认为他返回的是 HTML，而不是 JSON。

是的，刚才看到了，我的错，但是在这种情况下，json似乎更合适

我同意。这将使排序更加简单。您需要做的就是修改 DOM 以添加排序后 JSON 中的数据。

@RoryMcCrossan 取决于数据的大小（

很公平，那么你得到的是什么数据类型呢？这将是您应该在问题中提出的非常相关的信息。