2017-07-25 9 views
0

私はフィルターを使ってテーブルを実装しています。 既存のライブラリ(DataTablesなど)は、クライアントのページ付けに基づいているため、私の仕事ではありません。データベースからすべてのデータを取得することはできません。テンプレート内のテーブルコンテンツのみを新しいアイテム(Django)で更新する

私は、入力フィールドに何かを書き込んで、それに応じてテーブルの項目をフィルタリングできるようにしたいと思っています。 それがすべて開始されるURL:

http://127.0.0.1:8000/es/view-containing-the-table/

このURLはTABLE_ROWSと呼ばれるサブテンプレートが含まれてcustom_table.htmlでcointainedのhtmlを(下のファイルを参照してください)、持っています私は次のことを行っている、それを行うには

をリフレッシュしたいものである.htmlを、:

私のプロジェクトの

構造:テーブルのテーブルの内部

project 
|-app 
    |-static 
    | |-javascript 
    | |-myJS.js 
    | 
    |-templates 
    | |-templates1 
    | |-custom_table.html 
    | |-table_rows.html 
    | 
    |-views 
    | |-__init__.py #Gathers all the views from othe files) 
    | |-ajaxCalls.py 
    | |-modelViews.py 
    | 
    |-urls.py 

urls.py

url(r'^table_rows/$', views.tableRows, name='tableRows'), 

custom_table.html

#extend and loads here 

{% block content %} 
<table id="myTable""> 
    ... 
    <thead> #headers and filters for each column </thead> 
    <tbody id="table_body"> 
     {% include "templates1/table_rows.html" %} 
    </tbody> 
</table> 

{% endblock %} 

があり、インプすべての列にt。私は彼らに書き込み、その後、次のAJAX機能を呼び出す機能を起動するにはEnterキーを押しますすることができます

myJS.js

function getFilteredData(){ 

    modelName = #get ModelName 
    var filters = #get Filters 

    $.ajaxSetup({ 
     headers: { "X-CSRFToken": getCookie("csrftoken") } 
    }); 
    $.ajax({ 
     url : "../get_filtered_data/", 
     type : "POST", 
     data : { 
      modelName: modelName, 
      filters: JSON.stringify(filters) 
     }, 
     dataType: 'json', 
     success : function(json) { 
      $("#table_body").html('').load("app/views/tableRows.html", {reg_list: json.result}); 
     }, 
     error : function(xhr,errmsg,err) { 
      alert('Something went wrong'); 
      console.log(xhr.status + ": " + xhr.responseText); 
     } 
    }); 
} 

ajaxCalls.py

def get_filtered_data(request): 
    if request.method == "POST": 
     try: 

      [...] 
      reg_list = query response with filtered Data from DB 
      [...] 

      return JsonResponse({"status": "ok", "result":reg_list}) 
     except Exception as e: 
      return JsonResponse({"status": "none"}) 
    else: 
     return JsonResponse({"status": "none"}) 

modelViews.py

​​

テーブルの中にreg_listをロードする必要がある時点まで、すべてが正常に機能します。。 次のエラーがクロームコンソールに表示されます。

jqueryの-3.1.1.min.js:4 POST http://127.0.0.1:8000/es/view-containing-the-table/app/views/tableRows.html 404(FOUND NOT)

そうは、aparently、URLがすべて台無しにされますdjangoはすでに存在するビューに加えて新しいビューを作成しているからです。おそらくルーティングに何か問題がありますか? 私はどのように進行するかわかりません、助けてください。見つからない

+0

DataTables.netは、ページングおよびフィルタリングがすべてのサーバーで実行されるサーバー側のオプションがあります。 https://datatables.net/manual/server-side – Bindrid

+0

その後、https://datatables.net/reference/option/serverSideを見て私はすでに試したが、私はそれを動作させるために管理することができませんでした。しかし、チップのおかげで。 – chopeds

答えて

0
$("#table_body").html('').load(
    "app/views/tableRows.html", 
    {reg_list: json.result} 
); 

は、静的な資産ではなく、ビューテンプレートとしてアクセスする必要があるためです。 tableRows.htmlapp/static/にコピー/移動し、myJS.jsを正しい静的URLに更新してください。

またはapp/views/tableRows.htmlと一致するurls.pyでビューを定義します。 urls.pyの一部だけが共有されているように見えますので、私は画像の一部が欠落しています。

関連する問題