Why not appearing? When it appears, wrong styles

Why not appearing? When it appears, wrong styles

robertandrewsrobertandrews Posts: 3Questions: 1Answers: 0

Hi, I am trying to implement DataTables along with Propeller, a Material Design framework for Bootstrap.
It has its own documentation for that at http://propeller.in/components/data-table.php, which I have followed.

But I am still hitting some snags...

  1. It will not show if the JavaScripts are put at the foot of the page, only if they are in the header.

  2. When it does show, it does not use the Propeller stylings for the top and bottom controls.

  3. When it does show, the table does not take up the full width of the container (not sure if this is expected).

Frankly, not sure which of the CSS and JavaScripts, I should include, and in which order, but here is my HTML...

In header...


<link rel='stylesheet' id='BootstrapCSS-css' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' type='text/css' media='all' /> <link rel='stylesheet' id='PropellerCSS-css' href='http://www.mysite.com/wp-content/themes/context/css/propeller.css' type='text/css' media='all' /> <link rel='stylesheet' id='StylesheetCSS-css' href='http://www.mysite.com/wp-content/themes/context/style.css' type='text/css' media='all' /> <link rel='stylesheet' id='FontAwesomeCSS-css' href='http://www.mysite.com/wp-content/themes/context/fonts/font-awesome-4.7.0/css/font-awesome.min.css' type='text/css' media='all' /> <link rel='stylesheet' id='GoogleFontsCSS-css' href='http://fonts.googleapis.com/icon?family=Material+Icons' type='text/css' media='all' /> <link rel='stylesheet' id='DataTablesBootstrapCSS-css' href='https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css' type='text/css' media='all' /> <link rel='stylesheet' id='DataTablesSelectCSS-css' href='https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css' type='text/css' media='all' /> <link rel='stylesheet' id='PMDDataTablesCSS-css' href='http://propeller.in/components/data-table/css/pmd-datatable.css' type='text/css' media='all' /> <link rel='stylesheet' id='DataTablesJQueryCSS-css' href='https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css' type='text/css' media='all' /> <link rel='stylesheet' id='DataTablesResponsiveCSS-css' href='https://cdn.datatables.net/responsive/2.1.0/css/responsive.bootstrap.min.css' type='text/css' media='all' /> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script> <script type='text/javascript' src='https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js'></script> <script type='text/javascript' src='https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js'></script> <script type='text/javascript' src='https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js'></script> <script type='text/javascript' src='https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js'></script>

In body...

             <script>
              $(document).ready(function() {
                  $('#table-propeller').DataTable();
              } );
          </script>

            <div class="table-responsive">

                <table cellspacing="0" cellpadding="0" class="table pmd-table" id="table-propeller" width="100%">
                  <thead>
                    <tr>
                      <th></th>
                      <th>Name</th>
                      <th class="hidden-xs-down">Title</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>


                  <tr><td data-title="Avatar"><img alt="Adrienne Capaldo" src="http://res.cloudinary.com/mysite/image/fetch/w_300,h_300,c_fill,g_face,e_sharpen,b_rgb:ccc/http://www.mysite.com/wp-content/uploads/sites/2/2017/07/Adrienne-Capaldo-150x150.png" class="avatar avatar-32" height="32" width="32"/></td><td data-title="Name"><a href="http://www.mysite.com/profile/adriennecapaldo/">Adrienne Capaldo</a></td><td class="hidden-xs-down" data-title="Topic">Sr TEI Consultant</td><td data-title="Follow" class="text-right"><button type="button" class="btn pmd-btn-outline btn-primary pmd-ripple-effect btn-sm" data-toggle="modal" data-target="#modalContact">Follow</button></td></tr><tr><td data-title="Avatar"><img alt="Alex Causey" src="http://res.cloudinary.com/mysite/image/fetch/w_300,h_300,c_fill,g_face,e_sharpen,b_rgb:ccc/http://www.mysite.com/wp-content/uploads/sites/2/2017/07/Default_Analyst_Photo-150x150.png" class="avatar avatar-32" height="32" width="32"/></td><td data-title="Name"><a href="http://www.mysite.com/profile/alexcausey/">Alex Causey</a></td><td class="hidden-xs-down" data-title="Topic">Researcher</td><td data-title="Follow" class="text-right"><button type="button" class="btn pmd-btn-outline btn-primary pmd-ripple-effect btn-sm" data-toggle="modal" data-target="#modalContact">Follow</button></td></tr><tr><td data-title="Avatar"><img alt="Alex Cullen" src="http://res.cloudinary.com/mysite/image/fetch/w_300,h_300,c_fill,g_face,e_sharpen,b_rgb:ccc/http://www.mysite.com/wp-content/uploads/sites/2/2017/07/Alex-Cullen-150x150.png" class="avatar avatar-32" height="32" width="32"/></td><td data-title="Name"><a href="http://www.mysite.com/profile/alexcullen/">Alex Cullen</a></td><td class="hidden-xs-down" data-title="Topic">Vice President, Research Director</td><td data-title="Follow" class="text-right"><button type="button" class="btn pmd-btn-outline btn-primary pmd-ripple-effect btn-sm" data-toggle="modal" data-target="#modalContact">Follow</button></td></tr><tr><td data-title="Avatar"><img alt="Alexander Arnow" src="http://res.cloudinary.com/mysite/image/fetch/w_300,h_300,c_fill,g_face,e_sharpen,b_rgb:ccc/http://www.mysite.com/wp-content/uploads/sites/2/2017/07/Alex-Arnow-150x150.png" class="avatar avatar-32" height="32" width="32"/></td><td data-title="Name"><a href="http://www.mysite.com/profile/alexanderarnow/">Alexander Arnow</a></td><td class="hidden-xs-down" data-title="Topic">Consultant</td><td data-title="Follow" class="text-right"><button type="button" class="btn pmd-btn-outline btn-primary pmd-ripple-effect btn-sm" data-toggle="modal" data-target="#modalContact">Follow</button></td></tr><tr><td data-title="Avatar"><img alt="Alexander Spiliotes" src="http://res.cloudinary.com/mysite/image/fetch/w_300,h_300,c_fill,g_face,e_sharpen,b_rgb:ccc/http://www.mysite.com/wp-content/uploads/sites/2/2017/07/Alexander-Spiliotes-150x150.png" class="avatar avatar-32" height="32" width="32"/></td><td data-title="Name"><a href="http://www.mysite.com/profile/alexanderspiliotes/">Alexander Spiliotes</a></td><td class="hidden-xs-down" data-title="Topic">Researcher</td><td data-title="Follow" class="text-right"><button type="button" class="btn pmd-btn-outline btn-primary pmd-ripple-effect btn-sm" data-toggle="modal" data-target="#modalContact">Follow</button></td></tr><tr><td data-title="Avatar"><img alt="Alicia Arnold" src="http://res.cloudinary.com/mysite/image/fetch/w_300,h_300,c_fill,g_face,e_sharpen,b_rgb:ccc/http://www.mysite.com/wp-content/uploads/sites/2/2017/07/Alicia-Arnold-150x150.png" class="avatar avatar-32" height="32" width="32"/></td><td data-title="Name"><a href="http://www.mysite.com/profile/aliciaarnold/">Alicia Arnold</a></td><td class="hidden-xs-down" data-title="Topic">Principal Consultant</td><td data-title="Follow" class="text-right"><button type="button" class="btn pmd-btn-outline btn-primary pmd-ripple-effect btn-sm" data-toggle="modal" data-target="#modalContact">Follow</button></td></tr>


                  
                  </tbody>
                </table>

            </div>

At foot...

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js'></script>
<script type='text/javascript' src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
<script type='text/javascript' src='http://www.mysite.com/wp-content/themes/context/js/propeller.min.js'></script>
<script type='text/javascript' src='http://www.mysite.com/wp-includes/js/wp-embed.min.js?ver=4.8.1'></script>


Can anyone help, please?

This question has an accepted answers - jump to answer

Answers

  • bindridbindrid Posts: 730Questions: 0Answers: 119

    Why are you using an alpha version of bootstrap 4.0? It is not close to release and might not be compatible with the other stuff.

  • robertandrewsrobertandrews Posts: 3Questions: 1Answers: 0

    DataTables itself supports Bootstrap 4 alpha.
    This isn't the question.

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736

    In looking at your screenshot it looks like you are not using the full set of Datatables Bootstrap CSS and JS files. For example, I see the Datatables styled sorting icons. They are not styled with the Bootstrap icons. The best way to determine which files to use is to use the Download Builder. However I don't believe Bootstrap4 is there yet. This thread has a discussion of how to get the proper Datatables Bootstrap4 files:

    https://datatables.net/forums/discussion/42464

    Kevin

  • piyush.jainpiyush.jain Posts: 1Questions: 0Answers: 1
    Answer ✓

    We have resolved the issue you were facing in data table integration. Following are the issues which we found while working on your HTML copy:

    1. The javascript function which you took for initiating data tables was not complete and was placed in the body. We have added complete function in the footer, so now you can add your script files in the footer.

    2. You are using bootstrap 4 and data table supports bootstrap 3. Due to this, certain conflicts were coming in the CSS properties. We have overwritten those conflicts by adding custom CSS.

    3. The sequence of calling CSS files was not proper due to which PMD style was getting overwritten. We have rectified the sequence.

    We are sharing the modified HTML version file with this message. Hope this may solve your purpose.

    Team Propeller

  • robertandrewsrobertandrews Posts: 3Questions: 1Answers: 0

    @piyush.jain Thanks for this.
    As I am working with WordPress theme files, it has taken me some time to implement this in the correct order, enqueuing etc. But I have it working, so thanks.

    DataTables has a way of working with Bootstrap 4.

This discussion has been closed.