CODEWITHSUNDEEP
datatablesdatatables-1.10
raarts
raarts

Reputation: 2961

pagination buttons not being styled because of wrong classnames

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.

Upvotes: 3

Views: 5578

Answers (2)

Neeraj
Neeraj

Reputation: 764

I done it by simple way just adding Css

 .dataTables_paginate a {
        padding: 6px 9px !important;
        background: #54c5e6 !important;
        border-color: #2196F3 !important;
    }

Upvotes: 1

raarts
raarts

Reputation: 2961

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.

Upvotes: 4

Related Questions