Laravel中AdminLTE集成DataTables功能异常及样式变形问题咨询

我看了你遇到的问题——集成DataTables后搜索、分页、排序控件全部消失，且引入CDN导致AdminLTE样式变形，这大概率是资源加载顺序错误和重复引入冲突资源导致的，咱们一步步来修复：

核心问题点 #

1. jQuery加载顺序错误：你把DataTables的JS放在了jQuery之前加载，而DataTables完全依赖jQuery，这会直接导致DataTables初始化失败，功能控件自然无法渲染。
2. 重复引入冲突资源：同时引入了本地Bootstrap和CDN版Bootstrap，两个版本的样式会互相覆盖导致AdminLTE变形；还重复引入了DataTables的CSS文件，加重冲突。
3. HTML拼写错误：table-reponsive应该是table-responsive，这个小错误会影响表格的响应式布局。

修复后的完整代码示例 #

修正后的<head>部分 #

<head>
<link rel="stylesheet" href="./style.css">
<link rel="shortcut icon" href="img/favicon.ico" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ config('app.name') }}</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- 先加载Bootstrap（AdminLTE依赖它） -->
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- AdminLTE相关样式 -->
<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="/bower_components/admin-lte/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="/bower_components/admin-lte/dist/css/skins/skin-blue.min.css">
<!-- DataTables样式（放在AdminLTE之后，避免被覆盖） -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css">
</head>

修正后的<body>部分（重点调整脚本顺序和HTML拼写） #

<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1> Gestão de Utilizadores <small>Optional description</small> </h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
<li class="active">Here</li>
</ol>
</section>
<!-- Main content -->
<section class="content container-fluid">
@yield('content')
<!-- 修正拼写错误：table-reponsive → table-responsive -->
<div class="table-responsive box">
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Username</th>
<th>Password</th>
<th>Empresa</th>
<th>Conta</th>
<th>EDITAR</th>
<th>APAGAR</th>
</tr>
</thead>
<tbody>
@foreach($utilizadores as $utilizador)
<tr>
<td>{{ $utilizador->id }}</td>
<td>{{ $utilizador->username }}</td>
<td>{{ $utilizador->password }}</td>
<td>{{ $utilizador->empresa }}</td>
<td>@if($utilizador->type == 1) <b>Admin</b> @else User Normal @endif</td>
<td><a href = 'edituser/{{ $utilizador->id }}'>EDITAR</a></td>
<td><a href = 'edituser/{{ $utilizador->id }}'>APAGAR</a></td>
</tr>
@endforeach
</tbody>
</table>
</div>
</section>
<!-- REQUIRED JS SCRIPTS -->
<!-- 1. 先加载jQuery（所有依赖jQuery的脚本都要在它之后） -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<!-- 2. 加载Bootstrap JS -->
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- 3. 加载AdminLTE JS -->
<script src="/bower_components/admin-lte/dist/js/adminlte.min.js"></script>
<!-- 4. 最后加载DataTables相关JS -->
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>
<!-- DataTables初始化脚本（必须在所有依赖加载完成后） -->
<script type="text/javascript">
$(document).ready(function() {
    $('#example').DataTable({
        // 可选：添加葡萄牙语语言包，让控件显示更贴合场景
        language: {
            url: '//cdn.datatables.net/plug-ins/1.10.19/i18n/Portuguese.json'
        }
    });
} );
</script>

关键修复说明 #

• 脚本加载顺序：严格遵循 jQuery → Bootstrap → AdminLTE → DataTables 的顺序，确保所有依赖项加载完成后再初始化组件。
• 移除重复资源：只保留本地Bootstrap（AdminLTE基于本地版本开发，避免CDN版本冲突），删除重复的DataTables CSS引入。
• 修正HTML拼写：table-responsive是Bootstrap标准类名，拼写错误会导致响应式布局失效。
• 可选优化：添加DataTables葡萄牙语包，让控件文字更贴合你的业务场景。

按照这个方案调整后，应该就能同时解决DataTables功能控件消失和AdminLTE样式变形的问题，实现和官方示例一致的效果。

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