Laravel 8中创建JS类并使用类对象及DataTable加载异常排查

问题排查与修复步骤 #

1. 修正Blade语法无法在独立JS文件解析的问题 #

你在User_search.js中写的"{{url('/show_user_list')}}"是Laravel Blade模板语法，只有放在.blade.php文件内才会被服务端解析为实际请求地址，放在独立.js文件会原样保留，导致请求地址错误。
修复方法：
在index.blade.php的@php代码块之前先定义全局变量传递需要的动态值：

<script>
window.APP_CONFIG = {
    userListUrl: "{{url('/show_user_list')}}",
    loginUserId: {{ Auth::id() ?? 0 }}
};
</script>

再把User_search.js里的var loadGridUrl = "{{url('/show_user_list')}}";替换为var loadGridUrl = window.APP_CONFIG.userListUrl;。

2. 修复script标签语法错误 #

你在index.blade.php中定义的JS引入代码存在语法错误，src属性末尾多了多余的右括号，会导致JS文件加载失败：
原错误代码：

'<script type = "text/javascript" src="js/setting/user/User_search.js")></script>'

修改为：

'<script type = "text/javascript" src="js/setting/user/User_search.js"></script>'

3. 补充缺失的全局变量定义 #

你的JS代码中用到了user_id全局变量，但没有看到定义逻辑，变量未定义会直接抛出JS错误中断执行。可以直接用上一步定义的window.APP_CONFIG.loginUserId替换代码中的user_id。

4. 检查依赖库完整性与加载顺序 #

打开浏览器控制台（F12）检查是否有依赖加载错误，你用到的功能需要这些依赖按顺序加载：

• 优先加载jQuery，再加载DataTable核心库
• 用到了csv导出功能，需要额外加载DataTable的Buttons扩展、HTML5导出插件
• 代码末尾调用了select2()，需要提前加载select2库
• 所有依赖必须在User_search.js之前加载完成

5. 修正DOM获取时机错误 #

你现在在闭包初始化阶段就执行var DataGrid = $('#UserGrid');，如果JS加载时DOM还没渲染完成，拿到的就是空对象，后续调用DataTable会直接失败。把DataGrid的获取逻辑移到loadGrid函数内部即可：

var loadGrid = function () {
    var DataGrid = $('#UserGrid'); // 移到此处，确保DOM已渲染
    alert('called');
    // 其余原有逻辑不变
}

6. 接口返回格式校验 #

如果以上修改后仍无法运行，切换到浏览器控制台的「网络」标签，检查/show_user_list接口返回的JSON格式是否符合DataTable要求，必须包含data字段对应列表数据。

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