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