0

I am trying to use the jQuery Datatables plugin in my WordPress dashboard but the native WordPress admin CSS styling is overiding the datatables CSS, I am calling them like this...

add_action('admin_enqueue_scripts', 'admin_scripts');
function admin_scripts() {
    wp_enqueue_script('datatables', '//cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.js', array('jquery'),'1.21', true );
    wp_enqueue_style('datatables-css', '//cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.css', 99);
}

Is there a way to change the priority so it loads the datatables CSS first?

  • Try changing the action priority add_action('admin_enqueue_scripts', 'admin_scripts', 30 ); 30 or more. – obiPlabon Feb 20 '18 at 16:45
1

By default they should already be loading after the core admin styles. I suspect the CSS isn't even being loaded because you have an invalid parameter in your wp_enqueue_style() call. Its parameters are the same as wp_enqueue_script(). Where you have 99 is where dependencies are actually defined. So WordPress is looking for 99 to be loaded, not finding it, and skipping the enqueue.

So I would re-write that as follows:

 wp_enqueue_style( 'datatables-css', '//cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.css', 'datatables' );

What this does is loads the stylesheet but only if the JavaScript file is loaded.

  • 1
    There's no technical difference between wp_enqueue_style( 'datatables-css', '//cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.css', 'datatables' ); and wp_enqueue_style('datatables-css', '//cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.css', 99);. Because you have to pass the depency argument as array otherwise an empty array will be assigned. Check this core.trac.wordpress.org/browser/tags/4.9/src/wp-includes/… – obiPlabon Feb 20 '18 at 16:53
  • @obiPlabon But what will that 99 do then since it's in the place of the dependencies parameter? – Cedon Feb 20 '18 at 18:06
  • Having seen the code what do you think? 99 will be ignored mate – obiPlabon Feb 20 '18 at 18:11
0

You don't need to do that as this is all about CSS specificity. What you need to do is wrap the datatable in a unique div and then use that to specifically target the elements in your CSS.

For example (I don't know the CSS, BTW, so this is just a general example)

Wrap the table element in <div class="myClass">

Use the Inspector in your browser to find out exactly what line of CSS is being used for the styling you want to override.

If the CSS for an element is table.dataTable tr.dataTr td.dataTd then if you add the wrapper div to that it should override it as it's more specific, ie: .myClass table.dataTable tr.dataTr td.dataTd

You might need to experiment a bit until you get exactly the right combination to override the specificity. I usually find a wrapper element is enough, but sometimes I find adding a specific class to the (eg)table element helps (if you can), so it might be: table.dataTable.myTableClass tr.dataTr td.dataTd

Hope that helps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.