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

nb: tbody タグを追加しました。この方法で html を追加すると、html がノードの (長い) リストである場合よりも 1 つの親にラップされている場合の方がはるかに高速です。

うーん...編集しますが、これを使用するには、.ajaxでjson応答( datatype:'json')を期待していることを伝える必要がありますが、現在はそうではありません

また、サーバーから特定のヘッダー ("content-type:application/json") を送信する必要があります。

html を送信することを主張する場合は、サーバー側でデータを解析 (ラップ) し、コールバックで一度に追加します。

ソート機能の概念を再考したい場合、データがそれほど大きくない場合、および gzip できる場合。一度にすべてのデータをロードし、js で並べ替えを行います (これ以上サーバーを呼び出す必要はありません。この機能はユーザーにとってはるかに高速です。ページの読み込みを少し待つだけで、後で並べ替えるとすぐに並べ替えることができます)。

于 2013-02-09T11:51:56.753 に答える