Django Ajax 更新表失去排序功能

问题描述 投票:0回答:0

我正在使用这个插件来使我的 HTML 表格可排序并且效果很好。

<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>

在表格类中添加sortable即可调用

<table id='myTable' class="table table-striped table-hover table-bordered fixed_header sortable">

但是当我在过滤后使用 AJAX 更新表格时,表格会正确更新但失去了可排序的功能。

我必须在某处重新导入脚本吗? 我试图将它放在我的 home.html 页面中,当然还有在 Ajax 调用后呈现的 filter.html 页面中。

我也试过那些东西: 通过ajax更新内容时的排序功能

这是我的 AJAX

    <script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
   <form id="searchform" method="POST" action="{% url "article-filter" %}">
        {% csrf_token %}
    <input type="text"  id="txtSearch" name="txtSearch">
    <button type="submit" >Submit</button>
</form>

<script>
        $("#searchform").submit(function(e) {
        e.preventDefault();
        $.ajaxSetup({
        data: {txtSearch: $('#txtSearch').val(), csrfmiddlewaretoken: '{{ csrf_token }}' },});
        $.ajax({
            type: "POST",
            url: "article-filter/",
            dataType: 'json',
        }).done(function(data) {
            $('#myTable').html(data.html_table);
        });
    });
</script>

这是 home.html 和 filter.html 中的表格

table id='myTable' class="table table-striped table-hover table-bordered fixed_header sortable">
  <thead class="table-dark">
    <tr id='tableHeader'>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
      <th scope="col">Phone</th>
      <th scope="col">Address</th>
      <th scope="col">City</th>
      <th scope="col">State</th>
      <th scope="col">Zipcode</th>
      <th scope="col">Created At</th>
      <th scope="col">ID</th>
    </tr>
  </thead>
  <tbody>

{% if records %}
    {% for record in records %}
        <tr>
            <td>{{ record.first_name }} {{ record.last_name }}</td>
            <td>{{ record.email }}</td>
            <td>{{ record.phone }}</td>
            <td>{{ record.address }}</td>
            <td>{{ record.city }}</td>
            <td>{{ record.state }}</td>
            <td>{{ record.zipcode }}</td>
            <td>{{ record.created_at }}</td>
            <td><a href="{% url 'record' record.id %}">{{ record.id }}</a></td>
        </tr>
    {% endfor %}

{% endif %}


      </tbody>
    </table>

谢谢

django ajax
© www.soinside.com 2019 - 2024. All rights reserved.