3

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

2 回答 2

2

您的视图可以返回一个渲染片段,就像您可以在客户端渲染到一个 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 %} 
于 2013-02-10T11:40:21.390 回答
1
 function(data){
   var tablehtml='<tbody>'
   $.each(data,function(i,res) {
       tablehtml+='<tr class="result">'+
                   '<td><li>'+res.locationname+'</li></td>'+
                   //...
       });
    $("table").html(tablehtml+'</tbody'>)
    }

注意:我添加了 tbody 标记,因为如果 html 包含在单个父级中,则这种添加 html 的方式比它是(长)节点列表时要快得多

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

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

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

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

于 2013-02-09T11:51:56.753 回答