时间戳

首页 > 解决方案 > 无法在 DataTable 中显示引导模式

jquery - 无法在 DataTable 中显示引导模式

问题描述

当我单击 dataTable 中的 div 时，我试图显示引导模式，但我无法弄清楚它为什么不起作用。

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.6/js/responsive.bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.print.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css" />
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<link href="https://cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" />

可能是我在导入时遇到了一些错误。在 dataTable 脚本中，我有：

$(document).ready(function() {
    
    var table= $('#example').DataTable({
        "scrollY": "400px",
        "scrollCollapse": true,
        responsive: true,
        "autoWidth": false,
        dom: 'Bflrtip',
         "columnDefs": [ {
            "targets": 4,
            "data": null,
            "defaultContent": "<span class=\"btn btn-warning glyphicon glyphicon-eye-open\"></span>&nbsp;<span class=\"btn btn-primary glyphicon glyphicon-pencil\"></span>&nbsp;<div class=\"btn btn-danger glyphicon glyphicon-trash\"></div>"
        } ]
    } );
    $('#example tbody').on( 'click', 'span', function () {
        var data = table.row( $(this).parents('tr') ).data();
        document.cookie = "id="+data[0];
        window.location.replace('fiche_student.php');
    } );
    $('#example tbody').on( 'click', 'div', function () {
        /*var data = table.row( $(this).parents('tr') ).data();
        var r =confirm( ' \312tes-vous s\373r de vouloir supprimer le patient num\351ro '+data[0],'Confirmer' );*/
          $('#myModal').modal("show");
    
    } );
    
} );

模态的声明在我的 php 代码的末尾：

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle"></h3>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">ok</div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </div>
</div>

如果我显示一个简单的警报，则代码可以正常工作。但是，当我尝试显示模态时，它不起作用。

有什么建议可以解决这个问题吗？

标签： jquerydatatablebootstrap-modal

解决方案

对于那些可能有同样问题的人，解决方案是更改引导版本并将其降级到 3.4.0，就这么简单。

推荐阅读