DataTables dataTables_wrapper没有加载

Question

在我的WordPress v5.5.1中，我有一个定制的post类型存档页面来显示所有的帖子。对于这个特性，我们希望使用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>

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

然而，dataTables_wrapper 并没有加载，在这里我们可以对表内容、分页和搜索栏进行排序。我只看到普通的HTML表。

我在JSFiddle中运行了这段代码并运行良好(https://jsfiddle.net/0burvh1y/)。

我尝试过禁用所有插件并使用默认的WordPress jquery，但是没有运气。

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

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