Styling failure using what appears to be similar code...

phatlix

Link to test case:
https://dilih.link/dt1 (working)
https://dilih.link/dt2 (not working)

Debugger code (debug.datatables.net):
debugger has been ran on both sites and is being uploaded (only issue was a table width:100%, which is already set but not being seen on either site)

Error messages shown:
No error messages. Just style is not being applied.

Description of problem:

I have put together two sites/tables using the same database backend. The first site uses older code for the datatables configuration...

<script type="text/javascript">

  $(document).ready(function() {
      $('#songbook').dataTable( {
        sAjaxSource: 'dbget.php',
        responsive: 'true',
        pagingType: 'full',
        scrollX: 'true',
        scrollY: 'true',

        aoColumns: [
              { mData: 'artist' },
              { mData: 'title' },
              { mData: 'info' }
            ],

        dom: 'Alfrtip',
        alphabetSearch: [
              { column: '0' },
        ],

        rowGroup: {
                dataSrc: 'artist'
        }

      });

  });

</script>

The second site/table is using the newer code...

<script type="text/javascript">

 $(document).ready(function() {
  $('#catalog').dataTable( {
        ajax: 'dbget.php',
        responsive: 'true',
        pagingType: 'full',
        scrollX: 'true',
        scrollY: 'true',

        columns: [
           { data: 'discid' },
           { data: 'track' },
           { data: 'artist' },
           { data: 'title' },
           { data: 'info' }
        ],

        dom: 'Alfrtip',
        alphabetSearch:{
             column: 2
        },

        rowGroup: {
             dataSrc: 'artist'
        }

     });

  });

</script>

Both sites are using the same JS and CSS (I made a copy of the first site and then changed the config lines). I have also tried removing everything except the basics and also reducing the table down to two columns. I have been unable to style the body of the second site, no matter what I try. If I copy the index.html from site one to the second site it performs correctly.

I understand there are a couple table differences in the code above (the second set shows 'discid' and 'track'), but it does not matter if I remove them. I just left it in there as it's what I would like to have in the end of all this.

It appears that something about the differences in the config code is causing the issue, but I'm honestly just a hack web site put'er together guy and it would take me forever to track this down. Shoot, it took me three days to understand putting DataTables together!

What am I missing? Besides a degree in programming.

Thanks for your help!

kthorngren

The second example has:

<table id="catalog" class"display responsive nowrap" style="width:100%">

You need an = between class and the class list "display responsive nowrap", like this:

<table id="catalog" class="display responsive nowrap" style="width:100%">

These classes aren't being applied. Primarily the display class isn't applied which its attributes are shown in the Stying Docs.

Kevin

phatlix

Good thing nobody heard the amount of foul language that just flooded through my head! I have stared at that code for hours and missed a = ???

Thank you very very much!! You have eyes like a hawk!

I appreciate you,

Kenny

kthorngren

Some times it takes a second set of eyes to find the problem

Kevin