英文:
Bootstrap table with: Filter Columns and Collapsable Rows
问题
在这个Django项目中，我尝试创建一个带有可折叠行和筛选列的Bootstrap表格。我已经成功地使可折叠行正常工作，但是列过滤根本不起作用。
筛选列不起作用，选择字段可见，选择下拉框可以工作，但是当选择一个项目时，表格不会筛选。我想知道我是否没有正确使用对象的值？
Bootstrap5 CDN 已经包含在_base.html的头部
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
这是完整的代码：（此处省略了代码内容）
<script>
(function() {
$('#postTable').bootstrapTable({
filterControl: true,
showSearchClearButton: true,
filterShowClear: true,
onPostBody: function() {
// Initialize filter controls for 'title' and 'position' columns
$('.bootstrap-table-filter-control-title').selectpicker();
$('.bootstrap-table-filter-control-position').selectpicker();
}
});
});
</script>
<!-- Collapsable rows -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var rows = document.querySelectorAll('.table tbody tr[data-toggle="collapse"]');
rows.forEach(function(row) {
row.addEventListener('click', function() {
var target = this.getAttribute('data-target');
var hiddenRow = document.querySelector(target);
var display = window.getComputedStyle(hiddenRow).display;
hiddenRow.style.display = (display === 'none') ? 'table-row' : 'none';
});
});
});
</script>
希望这对您有所帮助。
英文:
In this Django Project, I attempting to create a Bootstrap Table with collapsible rows and filter columns. I've managed to make the collapsable rows work perfectly, but the column filtering is not working at all.
The filter columns are not working, the select fields are visible and drop downs for selecting work, but when an item is selected, the table does not filter. I'm curious if I'm not using the object values correctly?
Bootstrap5 CDN is included in the _base.html header
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
This is the full code:
<!-- templates/post_list.html -->
{% extends "_base.html" %}
{% block content %}
<div class="container">
<a class="jy-btn-text" href="{% url 'post_new' %}"><div class="yj-btn">Post New Job</div></a>
</div>
<div class="container">
<div class="table-wrapper">
<div class="col-md-12">
<div class="panel-heading">
<h4 class="jy-text">Current Job Posts</h4>
</div>
<div class="table-responsive">
<link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css">
<script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>
<!--
<link href="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.7.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.4/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
-->
<table class="table table-sm" id="postTable" data-filter-control="true" data-show-search-clear-button="true">
<thead>
<tr>
<th scope="col"><h6 class="jy-text"> <h6></th>
<th scope="col"><h6 class="jy-text">Date<h6></th>
<th scope="col" data-field="title">
<div class="th-inner"><h6 class="jy-text">Title<h6></div>
<div class="fth-cell">
<div class="filter-control">
<!--<input type="search" class="form-control bootstrap-table-filter-control-name search-input" stryle="width: 100%;" placeholder value>-->
<input type="text" class="form-control form-control-sm bootstrap-table-filter-control-title" style="width: 100%;" placeholder="" data-input="true" data-field="title">
</div>
</div>
</th>
<th scope="col" data-field="position">
<div class="th-inner"><h6 class="jy-text">Position<h6></div>
<div class="fth-cell">
<div class="filter-control">
<select class="form-control form-control-sm bootstrap-table-filter-control-position" style="width: 100%;" data-input="true" data-field="position">
<option value></option>
<option value="{{ post.position }}">Captain</option>
<option value="Mate">Mate</option>
<option value="ETO">ETO</option>
<option value="Chief Engineer">Chief Engineer</option>
<option value="Secdon Engineer">Secdon Engineer</option>
<option value="Engineer / Deckhand">Engineer / Deckhand</option>
<option value="Chef">Chef</option>
<option value="Sous Chef">Sous Chef</option>
<option value="Chief Steward(ess)">Chief Steward(ess)</option>
<option value="Second Steward(ess)">Second Steward(ess)</option>
<option value="Deckhand / Steward(ess)">Deckhand / Steward(ess)</option>
<option value="Deckhand">Deckhand</option>
<option value="Estate Staff">Estate Staff</option>
<option value="Other">Other</option>
</select>
</div>
</div>
</th>
<th scope="col"><h6 class="jy-text">Type<h6></th>
<th scope="col"><h6 class="jy-text">Location<h6></th>
<th scope="col"><h6 class="jy-text">LOA<h6></th>
</tr>
</thead>
<tbody>
{% for post in post_list %}
<tr data-toggle="collapse" data-target="#hidden-row-{{ post.id }}">
<td>
<button class="btn btn-default btn-xs"><p class="jy-text">+</p></button>
</td>
<td scope="row"><p class="jy-text">{{ post.date_post }}</p></td>
<td scope="row"><p class="jy-text">{{ post.title }}</p></td>
<td scope="row"><p class="jy-text">{{ post.position }}</p></td>
<td scope="row"><p class="jy-text">{{ post.employment }}</p></td>
<td scope="row"><p class="jy-text">{{ post.location }}</p></td>
<td scope="row"><p class="jy-text">{{ post.vessel_size }}</p></td>
</tr>
<!-- Hidden Row -->
<tr id="hidden-row-{{ post.id }}" class="collapse">
<td colspan="7" class="hiddenRow">
<p class="jy-text">Description: {{ post.description }}
<p class="jy-text">Contact this job!</p>
<a href="mailto:{{ post.email }}"><i class="fa-solid fa-circle-phone fa-2xs"></i></a> <a href="tel:{{ post.phone }}"><i class="fa-solid fa-circle-envelope fa-2xs"></i></a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
(function() {
$('#postTable').bootstrapTable({
filterControl: true,
showSearchClearButton: true,
filterShowClear: true,
onPostBody: function() {
// Initialize filter controls for 'title' and 'position' columns
$('.bootstrap-table-filter-control-title').selectpicker();
$('.bootstrap-table-filter-control-position').selectpicker();
}
});
});
</script>
<!-- Collapsable rows -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var rows = document.querySelectorAll('.table tbody tr[data-toggle="collapse"]');
rows.forEach(function(row) {
row.addEventListener('click', function() {
var target = this.getAttribute('data-target');
var hiddenRow = document.querySelector(target);
var display = window.getComputedStyle(hiddenRow).display;
hiddenRow.style.display = (display === 'none') ? 'table-row' : 'none';
});
});
});
</script>
{% endblock content %}
答案1
得分: 1
建议您使用Datatables而不是使用bootstrap表格（https://datatables.net/examples/styling/bootstrap5.html）。希望这对您有帮助，不仅可以进行筛选，还可以进行分页、排序等操作。请查看上述链接中的更多示例。
英文:
Instead of using bootstrap tables, I suggest you to use Datatables (https://datatables.net/examples/styling/bootstrap5.html). I hope it is helpfull, not only filter you can do pagination, sorting etc. Checkout more examples from the same link above.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论