三个按钮可更改数据表内容

Question

每个数据表按钮有三个按钮，我想过滤这些按钮，我的意思是当我今天按下按钮时，我只带来一天的数据表以及按钮周和月。 这是一张图片，显示了我的意思这是我的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("");
}

Answer 1

你只需要为 button 创建一个事件，从该事件调用你的函数，这样你就可以识别按下了哪个按钮。

<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>