DataTables与级联下拉脚本共存失效问题求助

问题根源 #

1. jQuery重复引入且版本冲突：DataTables的脚本包已内置jQuery 3.6.0，你后续又引入了低版本的jQuery 1.11.3，低版本会覆盖高版本，导致依赖高版本jQuery的DataTables无法正常初始化。
2. Bootstrap版本不匹配：DataTables使用的是Bootstrap 5适配版本（链接中的bs5标识），但你引入的是Bootstrap 4.5.3，版本不一致可能引发样式或脚本冲突。

修改后的完整代码 #

<!-- 引入Bootstrap 5样式（页面需要Bootstrap样式时添加） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

<!-- DataTables：包含Bootstrap 5适配样式及内置jQuery 3.6.0 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.12.1/datatables.min.css"/>
<script src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.12.1/datatables.min.js"></script>

<!-- Bootstrap 5 JS Bundle（包含Popper，无需单独引入） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

<!-- DataTables初始化脚本 -->
<script>
$(document).ready(function () {
    $('#tabel-data').DataTable({
        search: {return: true},
        paging: true,
        ordering: true,
        info: true
    });
});
</script>

<!-- 级联下拉脚本（合并重复事件绑定） -->
<script>
$(document).ready(function(){
    $('#jenisbarang').on('change',function(){
        var jenisbarang = $(this).val();
        
        // 获取MerekTipe数据
        $.ajax({
            url:'ambil_data.php',
            type:"POST",
            data:{
                modul:'MerekTipe',
                id:jenisbarang
            },
            success:function(respond){
                $("#merektipe").html(respond);
            },
            error:function(){
                alert("Gagal Mengambil Data");
            }
        });

        // 获取LokasiPJ数据
        $.ajax({
            url:'ambil_data.php',
            type:"POST",
            data:{
                modul:'LokasiPJ',
                id:jenisbarang
            },
            success:function(respond){
                $("#lokasipj").html(respond);
            },
            error:function(){
                alert("Gagal Mengambil Data");
            }
        });
    });
});
</script>

关键优化说明 #

• 移除了重复的jQuery 1.11.3引入，保留DataTables内置的高版本jQuery，解决核心冲突
• 将Bootstrap升级到5.3.0，与DataTables的Bootstrap 5版本完全适配
• 合并了#jenisbarang的两个change事件处理函数，减少重复绑定，提升代码性能

内容的提问来源于stack exchange，提问作者Nega