Bootstrap 是一个流行的前端框架,它提供了丰富的组件和工具,帮助开发者快速构建响应式、美观的网页。在数据密集型的应用中,高效的数据筛选功能对于提升用户体验至关重要。本文将介绍如何利用 Bootstrap 的带按钮查询组件(Button Group)和表格组件(Table)轻松打造高效的数据筛选攻略。
1. 基础设置
首先,确保你的项目中已经引入了 Bootstrap 的 CSS 和 JS 文件。以下是 Bootstrap 的 CDN 链接:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
2. 创建表格
接下来,我们需要创建一个基本的表格。这个表格将用于展示数据,并作为筛选的基础。
<table class="table">
<thead>
<tr>
<th scope="col">姓名</th>
<th scope="col">年龄</th>
<th scope="col">职位</th>
</tr>
</thead>
<tbody>
<!-- 数据行 -->
</tbody>
</table>
3. 添加筛选按钮
为了实现筛选功能,我们将在表格上方添加一个按钮组,其中包含筛选条件。
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">全部</button>
<button type="button" class="btn btn-outline-secondary">20岁以下</button>
<button type="button" class="btn btn-outline-secondary">20-30岁</button>
<button type="button" class="btn btn-outline-secondary">30岁以上</button>
</div>
4. 实现筛选逻辑
接下来,我们需要在 JavaScript 中实现筛选逻辑。以下是实现该功能的示例代码:
document.addEventListener('DOMContentLoaded', function () {
const buttons = document.querySelectorAll('.btn-outline-secondary');
const tableBody = document.querySelector('.table tbody');
buttons.forEach(button => {
button.addEventListener('click', function () {
const filterValue = this.textContent.replace('岁以下', '').replace('岁以上', '');
const filteredData = filterData(filterValue);
displayData(filteredData);
});
});
function filterData(filterValue) {
// 根据筛选值过滤数据
// 示例数据
const data = [
{ name: '张三', age: 22, position: '工程师' },
{ name: '李四', age: 27, position: '设计师' },
// ...更多数据
];
return data.filter(item => {
return item.age.toString().includes(filterValue) || item.position.includes(filterValue);
});
}
function displayData(data) {
// 显示筛选后的数据
tableBody.innerHTML = '';
data.forEach(item => {
const row = `<tr>
<td>${item.name}</td>
<td>${item.age}</td>
<td>${item.position}</td>
</tr>`;
tableBody.innerHTML += row;
});
}
});
5. 优化和扩展
在实际应用中,你可能需要根据具体需求对筛选逻辑进行优化和扩展,例如添加搜索框、排序功能等。
通过以上步骤,你可以利用 Bootstrap 的带按钮查询组件和表格组件轻松打造高效的数据筛选攻略。希望这篇文章能帮助你提升开发效率,为用户提供更好的体验。
