Why not appearing? When it appears, wrong styles

robertandrews

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?

bindrid

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.

robertandrews

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

kthorngren

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.jain

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

robertandrews

@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.