Add jquery datatable to child theme

enter image description here

I am using jquery and datatables on a child theme page:

add_action('wp_enqueue_scripts', 'enqueue_parent_theme_style');
function enqueue_parent_theme_style()
{
    //css
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('bootstrap-4.0.0', get_stylesheet_directory_uri() . '/css/bootstrap.min.css');
    wp_enqueue_style('dataTables-1.10.16', get_stylesheet_directory_uri() . '/css/dataTables.bootstrap4.min.css');

    //js
    wp_enqueue_script('main-mining-rig-js', get_theme_file_uri('/js/scripts-bundled.js'), NULL, '1.0', true);
}

style.css is where my custom styles are. Furthermore, I am loading bootstrap and the bootstrap 4 theme of dataTables.

However, my datatable within my page is not displayed correctly:

My html and css class look like the following:

  <table id="table_id" class="display">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Title</th>
                    <th>Description</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Row 1 Data 1</td>
                    <td>Row 1 Data 2</td>
                    <td>Row 1 Data 1</td>
                    <td>Row 1 Data 2</td>
                </tr>
                <tr>
                    <td>Row 2 Data 1</td>
                    <td>Row 2 Data 2</td>
                    <td>Row 1 Data 1</td>
                    <td>Row 1 Data 2</td>
                </tr>
            </tbody>
        </table>

I suspect that the error might be of an overlap of the loaded parent/child css. Is there any way to prioritize the child css higher only on this page?

I appreciate your replies!

Read more here:: Add jquery datatable to child theme

Leave a Reply

Your email address will not be published. Required fields are marked *