使用django ajax和js

时间:2017-11-16 06:36:02

标签: javascript jquery ajax django datatable

我一直在使用模式,我可以更新数据表中的用户帐户。在提交模式之后,我一直试图弄清楚如何使用ajax来刷新数据,但是通常会发生什么,表格会不断重复并最终导致浏览器崩溃,直到我甚至可以尝试使用编辑帐户功能。< / p> 来自admin.html页面的

数据表我想刷新

<div class="x_content">
                <div class="col-md-9" style="padding-left: 0;width: 80%" id="testRefresh">
                     <table id="datatable" class="table table-striped table-bordered projects dt-responsive" style="border:0; width: 100%">
                      <thead>
                        <tr>
                          <th style="text-align: center; width:10%; font-weight: 700">Group</th>
                          <th style="text-align: center; width:10%; font-weight: 700">Member</th>
                          <th style="text-align: center; width:10%; font-weight: 700">Router</th>
                          <th style="text-align: center; width:10%; font-weight: 700">Switch</th>
                          <th style="text-align: center; width:10%; font-weight: 700">Terminal</th>
                        </tr>
                      </thead>
                      <tbody>
                      {% for groups in groups %}
                        <tr>
                          <td>
                            <a href="#editGrp-{{groups.id}}" data-toggle="modal"><strong>{{ groups.name }}</strong></a>
                            <br />
                          </td>
                          <td>
                          <ul class="list-unstyled">
                          {% for user in users %}
                            {% ifequal user.profile.group.id groups.id %}
                            <li><a href="#editAcct-{{user.id}}" data-toggle="modal">{{user.username}}</a></li>
                            {% endifequal %}
                          {% endfor %}
                          </ul>
                        </td>


                        <td>
                        {% for gtd in grouptodevice %}
                         {% ifequal gtd.group.id groups.id %}
                          {% ifequal gtd.type 'AP' %}
                           {% ifequal gtd.device.type 'Router' %}
                            <ul class="allocatedDev-list">
                              <li style="padding-left: 0">                                 
                                <a>
                                  <img src="{% static 'production/images/routerAvatar.png' %}" class="avatar" alt="Avatar" style="margin-right: 6px">
                                  <strong>{{gtd.device.name}}</strong>
                                  <br/>
                                  <small>{{ gtd.startDateTime }} - {{ gtd.endDateTime }}</small>
                                </a>
                              </li>
                            </ul>
                           {% endifequal %}
                          {% endifequal %}
                         {% endifequal %}
                        {% endfor %}
                        </td>
                        <td>
                        {% for gtd in grouptodevice %}
                         {% ifequal gtd.group.id groups.id %}
                          {% ifequal gtd.type 'AP' %}
                           {% ifequal gtd.device.type 'Switch' %}
                            <ul class="allocatedDev-list">
                              <li style="padding-left: 0">                                 
                                <a>
                                  <img src="{% static 'production/images/switchAvatar.png' %}" class="avatar" alt="Avatar" style="margin-right: 6px">
                                  <strong>{{gtd.device.name}}</strong>
                                  <br/>
                                  <small>{{ gtd.startDateTime }} - {{ gtd.endDateTime }}</small>
                                </a>
                              </li>
                            </ul>
                           {% endifequal %}
                          {% endifequal %}
                         {% endifequal %}
                        {% endfor %}
                        </td>
                        <td>
                        {% for gtd in grouptodevice %}
                         {% ifequal gtd.group.id groups.id %}
                          {% ifequal gtd.type 'AP' %}
                           {% ifequal gtd.device.type 'Terminal' %}
                            <ul class="allocatedDev-list">
                              <li style="padding-left: 0">                                 
                                <a>
                                  <img src="{% static 'production/images/terminalAvatar.png' %}" class="avatar" alt="Avatar" style="margin-right: 6px">
                                  <strong>{{gtd.device.name}}</strong>
                                  <br/>
                                  <small>{{ gtd.startDateTime }} - {{ gtd.endDateTime }}</small>
                                </a>
                              </li>
                            </ul>
                           {% endifequal %}
                          {% endifequal %}
                         {% endifequal %}
                        {% endfor %}
                        </td>        
                        </tr>
                      {% endfor %}
                      </tbody>

                    </table>                      
                </div>

javascript ajax脚本

<script>
  // Refresh the Table every 5 seconds
 function refresh(){
      $.ajax({    
         url: '/ #datatable',
            success: function(data) {
            $('#testRefresh').html(data);
            setTimeout(refresh, 1000);
            }
      });
  }

  setTimeout(refresh, 1000);
</script>

0 个答案:

没有答案