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

Question

我遇到了这个问题：我有一个搜索结果页面，其中有几个结果。我希望用户能够根据某些标准对结果进行排序。我在 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>

Answer 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 %} 

Answer 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 中进行排序（不再需要服务器调用该功能对用户来说会更快：页面加载等待时间稍长，但之后会立即排序