Bootstrap 4 和 DataTables 中的模态未加载

我有一个加载下表的 php 页面： 代码是这样的：

<table id="tabla" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Usuario</th>
                    <th scope="col">Sector</th>
                    <th scope="col">Ultimo Ingreso</th>
                    <th scope="col">Acción</th>
                </tr>
            </thead>
            <tbody>
                <?php if ($arrDatos) {
                foreach ($arrDatos as $row) { ?>
                <tr>
                    <td>
                        <?php echo $row['id']; ?>
                    </td>
                    <td>
                        <?php echo $row['usuario']; ?>
                    </td>

                    <td>
                        <?php
                      if ($row['sector'] == 1) { ?>
                            <p>Administración</p>
                            <?php } else { ?>
                            <p>Producción</p>
                            <?php } ?>
                    </td>

                    <td>
                        <?php echo $row['ultimo_acceso']; ?>
                    </td>

                    <td>
                        <div class="btn-group">
                            <a href="#" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal" data-id=" <?echo $row[ 'id'];?>"><i class="fas fa-eye"></i></a>

                            <a href="editar.php?var=<?php echo base64_encode($row[ 'id']);?>" class="btn btn-success btn-sm">
                        <i class="fas fa-edit"></i>
                        </a>
                            <a href="eliminar.php?var=<?php echo base64_encode($row[ 'id']);?>" class="btn btn-danger btn-sm">
                        <i class="fas fa-trash-alt"></i>
                        </a>
                        </div>
                    </td>
                </tr>
                <?php }} ?>
            </tbody>
        </table>

我正在阅读数据表本身为每条记录合并了自己的查看器： dtybootstrap

事实证明，我遵循了文档中解释的所有步骤，如您所见，我没有得到您在图像中看到的第一个按钮：

在我的脑海中，我有以下内容：

<link rel="stylesheet" 
 href="../../componentes/bootstrap/css/bootstrap.min.css">
 <script src="../../componentes/jquery-3.3.1.min.js"></script>
 <script src="../../componentes/popper.min.js"></script>
 <script src="../../componentes/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" type="text/css" 
  href="../../componentes/DataTables/datatables.css">
  <script type="text/javascript" charset="utf8" 
  src="../../componentes/DataTables/datatables.js"></script>
  <link rel="stylesheet" href="../../componentes/DataTables/Buttons-
  1.5.1/css/buttons.bootstrap4.min.css">
  <link rel="stylesheet" href="../../componentes/DataTables/Responsive-
  2.2.1/css/responsive.bootstrap4.min.css">
  <script type="text/javascript" charset="utf8" 
  src="../../componentes/DataTables/Buttons-
  1.5.1/js/buttons.bootstrap4.min.js"></script>
  <script type="text/javascript" charset="utf8" 
  src="../../componentes/DataTables/Responsive-
  2.2.1/js/dataTables.responsive.min.js"></script>
  <script type="text/javascript" charset="utf8" 
  src="../../componentes/DataTables/Responsive-
  2.2.1/js/responsive.bootstrap4.min.js"></script>

  <link href="../../componentes/fontawesome/on-server/css/fontawesome-
  all.css" rel="stylesheet">
  <script>
  $(document).ready(function() {
    $('#tabla').DataTable({
        language: {
            "sProcessing": "Procesando...",
            "sLengthMenu": "Mostrar _MENU_ registros",
            "sZeroRecords": "No se encontraron resultados",
            "sEmptyTable": "Ningún dato disponible en esta tabla",
            "sInfo": "Mostrando del _START_ al _END_ de un total de _TOTAL_ 
     registros",
            "sInfoEmpty": "Mostrando de 0 al 0 de un total de 0 registros",
            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix": "",
            "sSearch": "Buscar: ",
            "sUrl": "",
            "sInfoThousands": ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst": "Primero",
                "sLast": "Último",
                "sNext": "Siguiente",
                "sPrevious": "Anterior"
            },
            "oAria": {
                "sSortAscending": ": Activar para ordenar la columna de 
        manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de 
        manera descendente"
            }
        },

        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal({
                    header: function(row) {
                        var data = row.data();
                        return 'Details for ' + data[0] + ' ' + data[1];
                    }
                }),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll({
                    tableClass: 'table'
                })
            }
        }
    });
});

</script>

起初我用引导模式打破了我的头，但我意识到我可以用数据表本身创建一个模式，我不知道为什么它不适合我......有人可以帮帮我吗？您是否建议我在数据表模式下执行此操作？还是自举？