用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) 

从那里我使用第一个dict，并使用迭代模板标签将结果传递到表格

{% 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加载数据的各种方式，并提供全面的文档。

编辑：对于Bootstrap表，请从此处开始。通常，我更喜欢使用数据属性而不是显式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"
    }
]