Bootstrap Snippet bootstrap4 table #table #checkbox #pagination #bootstrap4 #responsive-table #material-checkbox using HTML jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<main class="container pt-5">
    <button type="button" class="btn btn-danger attendance-control" data-state="attendant">
        <span class="attendance-label">Remover Presença</span>
        <span class="attendance-state badge badge-success">Presente</span>
    </button>
    <button type="button" class="btn btn-success attendance-control" data-state="absent">
        <span class="attendance-state badge badge-danger">Ausente</span>
        <span class="attendance-label">Adicionar Presença</span>
    </button>
</main>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(document).ready(function() {
    $('.attendance-control[data-state="attendant"] .attendance-label').html('Remover Presença?');
    $('.attendance-control[data-state="absent"] .attendance-label').html('Adicionar Presença?');
    $('.attendance-control').on('click', function() {
        var button = $(this);
        if (button.prop('data-state') == 'absent') {
            button.prop('disabled', 'disabled');
            button.html('Confirmando Presença...');
            setTimeout(function(){
                button.html('Presente, Remover?');
                button.prop('data-state', 'attendant');
                button.addClass('btn-danger').removeClass('btn-success');
                button.removeProp('disabled');
            }, 1500);
        } else {
            button.prop('disabled', 'disabled');
            button.html('Cancelando Presença...');
            setTimeout(function(){
                button.html('Ausente, Confirmar?');
                button.prop('data-state', 'absent');
                button.addClass('btn-success').removeClass('btn-danger');
                button.removeProp('disabled');
            }, 1500);
        }
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX