DataTables logo
≡

DT&Bootstrap: header is not styled, zebra missing

DT&Bootstrap: header is not styled, zebra missing

mbaasmbaas Posts: 67Questions: 24Answers: 1
in DataTables 1.10

Here is a screenshot of my table:

And the debugger-link: http://debug.datatables.net/owixod

The page itself is on localhost atm, so I can't post a link.

Problem is that the header of my table if not styled and the zebra-striping is missing. The individual rows have the odd and even-classes assigned to them. I have also verified that all JS and CSS is being loaded - at least the file-specs are correct, but maybe I am missing something?
I'm loading (in that sequence):

  1. bootstrap.min.css
  2. bootstrap-theme.min.css
  3. dataTables.bootstrap.css
  4. jquery-1.10.2.min.js
  5. bootstrap.min.js
  6. jquery.dataTables.min.js
  7. dataTables.bootstrap.js

The table is created here:

            $("#DieListe").dataTable({
                "paging": false ,
            "language": 
            {
                "url": "/DataTables/i18n/German.json"
            }
          });

What am I doing wrong???

This question has accepted answers - jump to:

Answers

  • aarontharkeraarontharker Posts: 41Questions: 11Answers: 0

    There will be something wrong in your CSS files most likely but without seeing the code for those it would be hard to help you. Have a read through this post for instructions on hosting your files if they are on a local host.

    http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read#latest

  • allanallan Posts: 65,820Questions: 1Answers: 10,951 Site admin

    From the debugger the table looks like this:

    <table id="DieListe" class="dataTable no-footer"

    So you haven't applied the classes Bootstrap supplies for styling the table! See the Bootstrap documentation.

    Allan

  • mbaasmbaas Posts: 67Questions: 24Answers: 1

    Thanks Allan.

    that has helped a little bit - at least the columns are wider now. I'm still missing the zebra-striping and boldface of header. What I find so confusing is that your example at https://datatables.net/manual/styling/bootstrap-simple.html does not use any special bootstrap-styles, yet the table loks great...?
    BTW, my example is now online @ http://mbaas.de/Klassenweb%205.5.html

    Thanks
    Michael

  • tangerinetangerine Posts: 3,371Questions: 42Answers: 395

    zebra-striping is being applied to your table, if you look carefully. You might want to apply a slightly darker color. I once had the same problem - it had to do with my screen's color/contrast setttings but you obviously can't pass that on to your users

  • mbaasmbaas Posts: 67Questions: 24Answers: 1

    Oh yes, you are right - my eyes are too bad for this ;-)

    re. header, I saw that I had a stylesheet which "unbolded" the header, so everything is fine now, thank you, Allan & tangerine! ;-)

  • allanallan Posts: 65,820Questions: 1Answers: 10,951 Site admin
    Answer ✓

    Out of interest, why have you marked the two answers that helped you resolve this as rejected?

  • mbaasmbaas Posts: 67Questions: 24Answers: 1

    Sry, some weird thinking here <blush>
    Do I need to undo that? I've accepted your last one so that the issue is closed.

  • allanallan Posts: 65,820Questions: 1Answers: 10,951 Site admin
    Answer ✓

    No worries - was just wondering :-).

This discussion has been closed.