使用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" 
    } 
]