Php DataTables DataTables\u包装器未加载

在我的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');

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

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

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');

$(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>

歌曲
歌曲1
歌曲2
歌曲3
歌曲4

正在加载DataTable css文件和js文件并应用样式

但是，

dataTables\u包装器

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

我在JSFiddle中运行了这段代码，效果很好（）

---

我尝试过停用所有插件并使用默认WordPress

jquery

，但没有成功。

我使用了下面的dataTable CDN URL和DataTables DataTables\u包装器正在加载：

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');

---

就我个人而言，我会创建函数，并将它们与以下操作联系起来：

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');

---

您在控制台中遇到一些JS错误？控制台中没有JS错误。需要澄清的是，您最后一次调用

wp\u enqueue\u script

示例代码还是真实的？第二个参数是绝对URL。如果你给它一个相对的，它必须存在于WP config旁边的WP根目录中（我很确定这是遗留的，应该避免使用）。通常使用

plugins\uurl（'js/scripts.js'，\uu FILE\uuu）

或类似的东西来代替。@ChrisHaas，我已经更新了主题文件中的最后一个

wp\u enqueue\u脚本
code
scripts.js
文件正在加载，但datatables包装器未加载。由于我们无法访问您的站点，您是否放置了
window.alert（'here'）在
ready（）
的内部，以确保它实际正在运行？