DataTables dataTables_wrapper is not loading

Question

In my WordPress v5.5.1, I have a custom post type archive page to show all the posts. For this feature, we wanted to use the DataTable. Have enqueued the DataTable files as below:

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

In my scripts.js file which is being loaded, I have enabled the DataTables as below:

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

Below is the HTML table:

<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 files and js files are being loaded and styles are applied.

However the dataTables_wrapper is not being loaded, where we can sort the table content, pagination and search bar. I see only the plain HTML table.

I ran this code in the JSFiddle and works fine (https://jsfiddle.net/0burvh1y/).

I have tried deactivating all plugins and using default WordPress jquery as well, but with no luck.

Just to be clear, is your last call to wp_enqueue_script sample code or real? The second parameter to that is an absolute URL. If you give it a relative one, it has to live in the WP root next to wp-config (which I'm very certain is legacy and should probably be avoided.) Usually something like plugins_url( 'js/scripts.js', __FILE__ ) or similar is used, instead. — Chris Haas
– Chris Haas, Commented Oct 6, 2020 at 19:32
@ChrisHaas, I have updated the last wp_enqueue_script code as is from my theme file. scripts.js file is loading, but the datatables wrapper is not loading. — theKing
– theKing, Commented Oct 7, 2020 at 13:41
Since we don't have access to your site, have you put a window.alert('here'); inside of your ready() to make sure it is actually running? — Chris Haas
– Chris Haas, Commented Oct 7, 2020 at 14:03

theKing · Accepted Answer · 2020-10-08 08:20:40Z

3

I have used the below dataTable CDN URLs and DataTables dataTables_wrapper is loading now:

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

answered Oct 8, 2020 at 8:20

theKing

8443 gold badges15 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Binayak Over a year ago

I was facing a similar issue in my .NET application and spent numerous hours debugging why the URLs worked fine on an online code sandbox but not in my project. Then i found this post. Seems like a weird solution, but i'll take it.

Alexandre Elshobokshy · Accepted Answer · 2020-10-08 10:15:59Z

Personally, I would create functions and link them to actions like the following :

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

Collectives™ on Stack Overflow

DataTables dataTables_wrapper is not loading

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related