数据表不会在移动设备上加载答案

【问题标题】：DataTables won't load on mobile devices数据表不会在移动设备上加载
【发布时间】：2018-03-27 11:06:17
【问题描述】：

我在当前项目中使用 DataTables，由于某种原因，当我在手机上运行该应用程序时，它不会加载任何由 ajax 提供的数据，并出现以下错误。

Uncaught TypeError: $(...).DataTable is not a function

但是在我的台式电脑上，它工作得非常好。我正在使用引导 4 版本的 DataTables，我的 app.js 如下所示

require( 'datatables.net-bs4' );
require( 'datatables.net-responsive-bs4' );

我在视图中按如下方式实例化 DataTable - 使用 @stack 强制它位于 app.js 包含下方

$(function() {
    $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ajax: {
            url: '{{ route('user.indexData') }}',
        },
        pagingType: "full_numbers",
        oLanguage: {
            "sSearch": "Filter:",
            "sInfo": "Showing _START_ to _END_ of _TOTAL_ user(s)",
            "sInfoEmpty": "No users to show",
            "sLengthMenu": "Show _MENU_ users"
        },
        columns: [
            { data: 'id', name: 'id', responsivePriority: 1},
            { data: 'name', name: 'name', responsivePriority: 2 },
            { data: 'email', name: 'email', responsivePriority: 3 },
            { data: 'action', name: 'action', searchable: false, orderable: false, responsivePriority: 4 }
        ],
        "drawCallback": function () {
            $('.dataTables_paginate > .pagination').addClass('flex-wrap');
        }
    });
});

有没有人知道为什么它只在我的移动设备上给我这个错误，以及任何可能的修复？

【问题讨论】：

你为什么将 php 标记为一种语言？是php中的服务器吗？即使是这种情况，也无关紧要，因为您的错误是客户端的。
删除标签@GyuhyeonLee，干杯。
另外...我们无法为您调试； “~不是函数”是一个非常直接的错误。 $('#users-table') 中没有 DataTable() 方法。设置一个断点（也许打开 chrome devtools 并将设备设置为移动设备）并查看$('#users-table') 实际上是什么，看看为什么没有您期望存在的任何功能。在那之后，也许你需要了解闭包和 IIFE。我对您所说的 DataTables 库不了解，但同样，您发布的错误不是库错误，而是通用错误。浏览器只是看不到（续）
@GyuhyeonLee 在下结论之前，您应该认真阅读这个问题。我明确指出这个问题只存在于移动设备上，在桌面上测试时它工作得很好——没有错误，没有警告。如果我在手机上打开 SAME url，那么它会吐出那个错误。
您想使用的任何方法都存在于当前对象中。原因可能会有所不同。库加载失败（虽然我不知道你为什么在这里使用require，但它不是 ES6 node.js，老实说，使用<script src="source.js"></script> 比希望客户端浏览器支持 ES6 语法更简单。

标签： javascript jquery laravel datatables

【解决方案1】：

我通过在我的要求前添加“window.DataTables”来解决我的问题，这允许系统识别 DataTables 库，即使它没有自动发现它。正如 Gyuhyeon Lee 在 cmets 中所建议的那样，我认为这是由于浏览器的旧版本造成的。

这是为我修复它的代码。

window.DataTables = require( 'datatables.net-bs4' );

我已多次解决此问题，但在移动设备上工作时，我从未意识到该页面已缓存 - 导致出现相同的错误。所以记得清除你的缓存。

【讨论】：