DataTables dataTables_wrapper 未加载

Posted 2023-05-08

【中文标题】DataTables dataTables_wrapper 未加载

【英文标题】：DataTables dataTables_wrapper is not loading

【发布时间】：2021-01-14 03:16:56

【问题描述】：

在我的 WordPress v5.5.1 中，我有一个自定义帖子类型存档页面来显示所有帖子。对于这个功能，我们想使用DataTable。已将 DataTable 文件排入队列，如下所示：

wp_deregister_script('jquery'); // deregistered default jQuery
wp_enqueue_script('jq', 'https://code.jquery.com/jquery-3.5.1.min.js', array(), null, true); // for Bootstrap
// DATATABLES
wp_enqueue_script('js', 'https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js', array('jq'), null, true);
wp_enqueue_script('wp-js', get_template_directory_uri() . '/js/scripts.js', array('jq'), null, true);
wp_enqueue_style('css', 'https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css');

在我正在加载的 scripts.js 文件中，我启用了 DataTables，如下所示：

$(document).ready(function () 
    $('#songs').DataTable();
);

下面是 html 表格：

<table id="songs" class="table dataTable">
    <thead>
        <tr>
            <th>Songs</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Song 1</td>
        </tr>
        <tr>
            <td>Song 2</td>
        </tr>
        <tr>
            <td>Song 3</td>
        </tr>
        <tr>
            <td>Song 4</td>
        </tr>
    <tbody>
</table>

正在加载数据表 css 文件和 js 文件并应用样式。

但是dataTables_wrapper没有被加载，我们可以在其中对表格内容、分页和搜索栏进行排序。我只看到纯 HTML 表格。

我在 JSFiddle 中运行了这段代码并且工作正常 (https://jsfiddle.net/0burvh1y/)。

我尝试停用所有插件并使用默认的 WordPress jquery，但没有成功。

【问题讨论】：

你在控制台中遇到了一些 JS 错误？

控制台中没有 JS 错误。

澄清一下，您最后一次调用wp_enqueue_script 示例代码还是真实的？第二个参数是绝对 URL。如果你给它一个相对的，它必须位于 wp-config 旁边的 WP 根目录中（我非常确定这是遗留的，应该避免使用。）通常使用类似 plugins_url( 'js/scripts.js', __FILE__ ) 或类似的东西，而不是。

@ChrisHaas，我已经更新了我的主题文件中的最后一个wp_enqueue_script 代码。 scripts.js 文件正在加载，但数据表包装器未加载。

由于我们无法访问您的网站，您是否在您的ready() 中添加了window.alert('here'); 以确保它确实在运行？

【参考方案1】：

我已使用以下 dataTable CDN URL 和 DataTables dataTables_wrapper 现在正在加载：

wp_enqueue_script('js', 'https://cdn.datatables.net/v/bs4/dt-1.10.22/datatables.min.js', array('jq'), null, true);
wp_enqueue_style('css', 'https://cdn.datatables.net/v/bs4/dt-1.10.22/datatables.min.css');

【讨论】：

我在我的 .NET 应用程序中遇到了类似的问题，我花了很多时间调试为什么这些 URL 在在线代码沙箱上可以正常工作，但在我的项目中却不行。然后我找到了这个帖子。似乎是一个奇怪的解决方案，但我会接受它。

【参考方案2】：

就个人而言，我会创建函数并将它们链接到如下操作：

function add_datatables_scripts() 
  wp_register_script('datatables', 'https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js', array('jquery'), true);
  wp_enqueue_script('datatables');

  wp_register_script('datatables_bootstrap', 'https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js', array('jquery'), true);
  wp_enqueue_script('datatables_bootstrap');

 
function add_datatables_style() 
  wp_register_style('bootstrap_style', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
  wp_enqueue_style('bootstrap_style');

  wp_register_style('datatables_style', 'https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css');
  wp_enqueue_style('datatables_style');


add_action('wp_enqueue_scripts', 'add_datatables_scripts');
add_action('wp_enqueue_scripts', 'add_datatables_style');