三个按钮更改数据表内容

Question

I have three buttons for each data-table button, I want to filter these buttons, I mean when I press the button today brings me only data-table for the day as well as the button week and also month. Here is a picture showing what I mean Here is my HTML code:

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

and here is my JS code:

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

You just need to create an event for button, call your function from that event so you can identify which button is pressed.

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

Now you need to handle common change event

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