使用Ajax填充模式表

Question

好吧，所以我已經在這個問題上工作了一個多星期了，但仍然無法找到工作解決方案，而且我還有一點難以理解。我遇到的問題是我試圖使用ajax將數據加載到單擊事件的模式表中。我嘗試了幾種不同的實現，但我對Ajax和JavaScript非常陌生。這是我的。

我傳遞從我的控制器，兩個庫到我的模板背景：

views.py

def queries_search(request): 
    ... 

    context = { 

      "title":"Search", 
      'data': list(od.iteritems())[:10], 
      'methods': od_methods.iteritems(), 


     } 
     return render(request, 'results.html', context) 

從那裏，我走的是第一字典和使用迭代的結果傳遞到表模板標籤

{% if data %} 
    <section class="results-section"> 
     <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div id='loader' class="center-block"> 
       <p>Searching<img src='{% static "img/ellipsis.svg" %}'></p> 
       <img class="center-block" src='{% static "img/gears.svg" %}'> 
      </div> 
      <div id='results_donwload'> 
       <a href="{% static 'mycsvfile.csv' %}" > Downlaod Search Results </a> 
       <img style="width: 12%;" src='{% static "img/download-icon.png" %}'> 
      </div> 
      <table class="table table-bordered table-striped table-hover table-responsive" id="results-table" > 
       <thead> 
        <tr> 
         <th style="width: 4%">#</th> 
         <th>Study Reference</th> 
         <th>Study Methods</th> 
         <th>Study Data</th> 
         <th>Study Tools</th> 
        <tr> 
        </thead> 
        <tbody> 
        {% if data %} 
        {% for key, value in data %} 
        <tr> 
         <td scope="row">{{ forloop.counter }}.</td> 
         <td> 

         <div id="popup"> 
         <p class="citation" data-hover="{{ value.2 }}">{{ value.1 }} 
         <img src='{% static "img/expand-icon2.png" %}' id="expand"></p> 
         <a class="article" target="_blank" href={{ value.3 }}>{{ value.2 }}</a> 
         </div> 

         </td> 
         {% if value.4 %} 
         <td class='test'>{{ value.4|truncatewords:20 }}<a href='#' id="trigger_{{ forloop.counter }}"><img src='{% static "img/expand-icon2.png" %}' id="expand" data-remote="false"></a> 

之後我有一個圖標，點擊時會調出顯示單元格數據的模式。

{% if methods %} 
{% for key2, value in methods %}{% ifequal key2 key %} 
<div id="classModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="classInfo" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
     × 
     </button> 
     <h4 class="modal-title" id="classModalLabel"> 
             Triples: 
             </h4> 
    </div> 
    <div class="modal-body"> 
     <table id="classTable1" class="table table-bordered"> 
     <thead> 
      <tr> 
      <th style="width: 4%">#</th> 
      <th>Subject</th> 
      <th>Predicate</th> 
      <th>Object</th> 
      <tr> 
     </thead> 
     <tbody id='methods_table_data'> 
      {% for item in value %} 
      <tr> 
       <td scope="row">{{ forloop.counter }}.</td> 
       <td>{{ item }}</td> 
       <td>{{ item }}</td> 
       <td>{{ item }}</td> 
      </tr> 

      {% endfor %} 
      </tbody> 
     </table> 
     </div> 

然而，這就是我堅持的模式沒有與到目前爲止，我已經寫的JavaScript是功能：

$('.test').each(function(){ 
    var trig = '[id^="trigger_"]'; 
    $(trig).click(function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     url: "/searchTriples/search/", 
     method: "GET", 
     dataType: "json", 
     data: "{{ methods|safe }}", 
     async: true, 
     success: function (data) { 
      $("#classTable1").html(data); 
      $("#classModal").modal('show'); 
      //return false; 
     }, 

    }); 
    //return false; 
    }) 

}); 

控制檯輸出：

29/Aug/2017 19:57:01] "GET /searchTriples/search/?%3Cdictionary-itemiterator%20object%20at%200x102b57f18%3E HTTP/1.1" 200 16262 
[29/Aug/2017 19:57:01] "GET /searchTriples/search/?%3Cdictionary-itemiterator%20object%20at%200x102b57f18%3E HTTP/1.1" 200 16262 
[29/Aug/2017 19:57:01] "GET /searchTriples/search/?%3Cdictionary-itemiterator%20object%20at%200x102b57f18%3E HTTP/1.1" 200 16262 
[29/Aug/2017 19:57:01] "GET /searchTriples/search/?%3Cdictionary-itemiterator%20object%20at%200x102b57f18%3E HTTP/1.1" 200 16262 
[29/Aug/2017 19:57:01] "GET /searchTriples/search/?%3Cdictionary-itemiterator%20object%20at%200x102b57f18%3E HTTP/1.1" 200 16262 
[29/Aug/2017 19:57:02] "GET /searchTriples/search/?%3Cdictionary-itemiterator%20object%20at%200x102b57f18%3E HTTP/1.1" 200 16262 
[29/Aug/2017 19:57:02] "GET /searchTriples/search/?%3Cdictionary-itemiterator%20object%20at%200x102b57f18%3E HTTP/1.1" 200 16262 
[29/Aug/2017 19:57:02] "GET /searchTriples/search/?%3Cdictionary-itemiterator%20object%20at%200x102b57f18%3E HTTP/1.1" 200 16262 
[29/Aug/2017 19:57:02] "GET /searchTriples/search/?%3Cdictionary-itemiterator%20object%20at%200x102b57f18%3E HTTP/1.1" 200 16262 

任何幫助表示讚賞，謝謝！

Answer 1

而不是重新發明輪子，我建議看像Bootstrap Table或DataTables的工具。

這兩個都是jQuery的全功能表插件，支持Bootstrap，通過AJAX加載數據的各種方式，並提供全面的文檔。

編輯：用於引導表，開始here。通常，我更喜歡using data attributes而不是顯式JavaScript。爲了加載通過AJAX的數據，你會使用data-url屬性，就像這樣：

<table data-toggle="table" data-url="/url/to/json_endpoint"> 
    <thead> 
     <tr> 
      <th data-field="id">Item ID</th> 
      <th data-field="name">Item Name</th> 
      <th data-field="price">Item Price</th> 
     </tr> 
    </thead> 
</table> 

你的AJAX端點應以以下格式返回數據：

[ 
    { 
     "id": 1, 
     "name": "Item 1", 
     "price": "$1" 
    }, 
    { 
     "id": 2, 
     "name": "Item 2", 
     "price": "$2" 
    }, 
    { 
     "id": 3, 
     "name": "Item 3", 
     "price": "$3" 
    } 
]