pagination buttons not being styled because of wrong classnames

Question

I am using the metronic framework with datatables, though I don't know if this relates to metronic.

All is well except for the pagination buttons, they are shown as text without styling.

Chrome reveals the following styling:

<div class="dataTables_paginate paging_simple_numbers" id="auth_history_paginate">
    <a class="paginate_button first disabled" aria-controls="auth_history" 
   data-dt-idx="0" tabindex="0" id="auth_history_first">First</a>
    <span>
        <a class="paginate_button current" aria-controls="auth_history" 
       data-dt-idx="2" tabindex="0">1</a>
        <a class="paginate_button " aria-controls="auth_history" data-dt-idx="3" 
       tabindex="0">2</a>
    </span>

but the paginate_button class is not defined.

The official datatables demo shows the following:

<div class="dataTables_paginate paging_simple_numbers" id="example_paginate">
    <ul class="pagination">
    <li class="paginate_button previous disabled" id="example_previous">
        <a href="#" aria-controls="example" data-dt-idx="0" tabindex="0">Previous</a>
    </li>
    <li class="paginate_button active">
        <a href="#" aria-controls="example" data-dt-idx="1" tabindex="0">1</a>
    </li>
    <li class="paginate_button ">
        <a href="#" aria-controls="example" data-dt-idx="2" tabindex="0">2</a>
    </li>

So there the js generates an unordered list.

How is it possible that in my code completely different DOM elements are being generated compared to the official datatables examples?

Could this be related to my using metronic? I find that implausible.

Answer 1

To answer my own question: I was using the following with webpack to import all assets:

require('datatables.net');
require('datatables.net-bs/css/dataTables.bootstrap.css');

But the datatables-bs and other 'styling' packages contain js on top of css, so need to be require()'ed separately. Even though it is mentioned on the npm page, I only understood what the particular sentence meant, after I encountered this problem.

require('datatables.net');
require('datatables.net-bs');
require('datatables.net-bs/css/dataTables.bootstrap.css');

The datatables npm page should also mention that when using it with webpack you don't need to do var dt = require('datatables.net')(); but just a simple require('datatables.net') does the trick.