Clicking the modal button does not open confirmation window

Question

I’m having trouble with the modal that does not work, IE, does not open on the screen. I am using DataTables to list database items with JSON.

What happens is that by clicking the delete button, modal won’t open:

Layer that pulls the information basically is like this:

Mount the JSON for for and play back to the controller, to be called by the method list of controller and mount DataTables:

<script>
    //$.fn.dataTable.ext.errMode = 'none';
    $(document).ready(function(){
        $('#exemplo').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax":{
                "url":"<?php echo base_url('usuario/blacklist/list');?>",
                "type": "POST"
            },
            "columnDefs":[{
                "targets":[-1],
                "orderable":false,
            }]
        });
    });
</script>

Code of the VIEW layer:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

?>
<!-- Begin Page Content -->
<div class="container-fluid">

    <!-- Page Heading -->
    <h1 class="h3 mb-2 text-gray-800">Usuario/Blacklist</h1>
    <br/>

    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Blacklist</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="exemplo" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>RG</th>
                            <th>Paciente</th>
                            <th>Ocorrência</th>
                            <th>Descrição</th>
                            <th>Penalidade</th>
                            <th>Data</th>
                            <th>Responsável</th>
                            <th>Opções</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>ID</th>
                            <th>RG</th>
                            <th>Paciente</th>
                            <th>Ocorrência</th>
                            <th>Descrição</th>
                            <th>Penalidade</th>
                            <th>Data</th>
                            <th>Responsável</th>
                            <th>Opções</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>  
</div>


<!-- Page level custom scripts -->
<script src="<?php echo base_url('assets/site/js/demo/datatables-demo.js');?>"></script>

<!-- Page level plugins -->
<script src="<?php echo base_url('assets/site/vendor/datatables/jquery.dataTables.min.js');?>"></script>
<script src="<?php echo base_url('assets/site/vendor/datatables/dataTables.bootstrap4.min.js');?>"></script>
<script>
    //$.fn.dataTable.ext.errMode = 'none';
    $(document).ready(function(){
        $('#exemplo').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax":{
                "url":"<?php echo base_url('usuario/blacklist/list');?>",
                "type": "POST"
            },
            "columnDefs":[{
                "targets":[-1],
                "orderable":false,
            }]
        });
    });
</script>

<div class="modal fade" id="modal_confirmation">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title">Deseja Excluir o item?</span>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>

            </div>
            <div class="modal-body">
                <p>Excluir o registro <strong><span id="nome_exclusao"></span></strong>?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data- 
            dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-danger" id="btn_excluir">Excluir</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal --> 
<script>
    var base_url = "<?= base_url(); ?>";

    $(function() {
        $('.confirma_exclusao').on('click', function(e) {
            e.preventDefault();

            var nome = $(this).data('nome');
            var id = $(this).data('id');

            $('#modal_confirmation').data('nome', nome);
            $('#modal_confirmation').data('id', id);
            $('#modal_confirmation').modal('show');
        });

        $('#modal_confirmation').on('show.bs.modal', function() {
            var nome = $(this).data('nome');
            $('#nome_exclusao').text(nome);
        });

        $('#btn_excluir').click(function() {
            var id = $('#modal_confirmation').data('id');
            document.location.href = base_url + "usuario/blacklist/excluir/" + id;
        });
    });
</script>

Obs: JavaScript, and the library CSS Bootstrap are already being imported. Interestingly, when I add button of modal right in the html, works. However, when ajax plays in DataTables it doesn’t work.