我正在使用这个插件来使我的 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>
谢谢