用Ajax填充模式表

Question

Okay so I've been working on this issue for over a week now and still have not been able to find a working solution and I more than a little stumped. The problem I'm having is I'm trying to use ajax to load data into a table in a modal on a click event. I've tried several different implementations but I am very new to Ajax and javascript. Here is what I have.

I am passing two dictionaries from my controller to my template as context:

views.py

def queries_search(request):
    ...

    context = {

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


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

from there I am taking the first dict and passing the results to a table using the iterative template tags

{% 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>

after this I have an icon that when clicked brings up a modal with the cell data displayed.

{% 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>

However, this is where I'm stuck as the modal is not functioning with the javascript I have written so far which is:

$('.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;
  })

});   

console output:

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

Any help is appreciated, thanks!

Answer 1

Instead of reinventing the wheel, I suggest looking at tools like Bootstrap Table or DataTables .

Both are full-featured table plugins for jQuery, support Bootstrap, various ways of loading data via AJAX, and offer comprehensive documentation.

EDIT: for Bootstrap Table, start here . Generally, I prefer using data attributes over explicit JavaScript. In order to load the data via AJAX, you'll use the data-url attribute, like so:

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

Your AJAX endpoint should return data in the following format:

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