javascript - 三个按钮更改数据表内容
问题描述
我为每个数据表按钮设置了三个按钮,我想过滤这些按钮,我的意思是当我今天按下按钮时,我只会看到当天的数据表以及按钮周和月的数据表。 这是一张显示我的意思的图片 这是我的 HTML 代码:
<div class="row">
<div class="col-sm-9 m-b-xs">
<div data-toggle="buttons" class="btn-group btn-group-toggle">
<label class="btn btn-sm btn-white"> <input type="radio" id="option1" name="options"> Day </label>
<label class="btn btn-sm btn-white active"> <input type="radio" id="option2" name="options"> Week </label>
<label class="btn btn-sm btn-white"> <input type="radio" id="option3" name="options"> Month </label>
</div>
</div>
</div>
这是我的JS代码:
var empList = [];
var filter_expired = 'all';
function generateTable() {
var html = '';
console.log("ok", empList);
$.each(empList, function (key, item) {
if (filter_expired == 'all' || (filter_expired == "expired" && item.isExpired == true) || (filter_expired == "notExpired" && item.isExpired == false)) {
html += '<tr>';
html += '<td style="vertical-align: middle;">' + item.anything + '</td>';
html += '<td style="vertical-align: middle;">' + (item.anything1 !== undefined ? item.anything1 : "-") + '</td>';
html += '<td style="vertical-align: middle;">' + (item.anything2 !== undefined ? item.anything2 : "-") + '</td>';
html += '<td style="vertical-align: middle;">' + (item.anything3 !== undefined ? item.anything3 : "-") + '</td>';
html += '<td style="vertical-align: middle;">' + (item.anything4 !== undefined ? item.anything4 : "-") + '</td>';
html += '</td></tr>';
html += '</tr>';
}
});
$('#myTable').append('<tbody class="tbody">' + html + '</tbody><tfoot><tr class="footable-paging"><td colspan="9"><div class="footable-pagination-wrapper"><ul class="pagination pull-right"><li id="arrowFirst" class="footable-page-arrow disabled"><a data-page="first" href="#first">«</a></li><li class="footable-page-arrow disabled"><a data-page="prev" href="#prev">‹</a></li><li class="footable-page active"><a data-page="0" href="#">1</a></li><li class="footable-page"><a data-page="1" href="#">2</a></li><li class="footable-page-arrow"><a data-page="next" href="#next">›</a></li><li id="arrowLast" class="footable-page-arrow"><a data-page="last" href="#last">»</a></li></ul></div></td></tr></tfoot>');
$('#myTable').footable({
"paging": {
"enabled": true,
"data-page-size": "15",
"data-limit-navigation": "3"
},
"sorting": {
"enabled": true
}
});
clientRefresh();
$('.ibox').children('.ibox-content').toggleClass('sk-loading'); $('.ibox').addClass('bounce');
$("#search").val("");
}
解决方案
您只需要为按钮创建一个事件,从该事件中调用您的函数,以便您可以识别按下了哪个按钮。
<div class="row">
<div class="col-sm-9 m-b-xs">
<div data-toggle="buttons" class="btn-group btn-group-toggle">
<label class="btn btn-sm btn-white"> <input type="radio" value="day" id="option1" name="options" > Day </label>
<label class="btn btn-sm btn-white active"> <input type="radio" value="week" id="option2" name="options"> Week </label>
<label class="btn btn-sm btn-white"> <input type="radio" value="month" id="option3" name="options"> Month </label>
</div>
</div>
</div>
现在您需要处理常见的更改事件
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
$('input:radio[name=options]').change(function () {
var filterType = $(this).val();
generateTable(filterType)
});
});
function generateTable(filterType) {
//do filter in your code using above param
}
</script>
推荐阅读
- c# - 更新数据时出现 SQL 错误 - 事务(进程 ID)已死锁
- fluentd - 如何在无网络上安装 fluentd 插件(离线)
- python - NiFi:如果失败,则以有限的尝试运行 ExecuteStreamCommand 处理器
- asp.net-core - ServiceStack ServiceStack.Auth.OrmLiteAuthRepository
- filter - 两个 R 代码应该做同样的事情(至少在我的脑海里),有什么不同?
- node.js - mongoose 能阻止所有 NoSQL 攻击吗?
- javascript - 如何在javascript中获取选择框的值?
- firebase - 用于一对一设备通知的 Firebase CLI
- javascript - 如何在 Array 中查找使用 JSON.parse 产生错误的对象
- vba - 选择记录时如何填充复选框?