Dependency Order or CDN changes to get Responsive table to work?

mikepfly2

I created a datatable that uses the responsive setting over a year ago and pretty sure it was working as designed. Today, my client mentioned they couldn't get to the edit buttons in the last column and when I went to check the table was not being responsive (it wasn't adding the little green + signs).

When developing in my localhost I use local paths to external libraries saved on my server. For production the site uses CDN links. Is there a chance something changed in the CDN files that would have broken the responsive feature?

Here are my current CDN links (I also tried updating the links to the latest versions for the datatables and extensions, but no luck.) I'm just using my local paths for the production environment to make the client happy, but curious if this could have caused the issue. I'm not getting any errors that a file can't be loaded or anything easy either.

CDN Dependency files (doesn't show responsive table):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.6/js/dataTables.select.min.js"></script>
<script src="<?smarty $smarty.const.EXTERNAL_URL ?>/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css">

Files from LocalHost (not sure if helpful or not) and these do work for showing a responsive datatable:

<script src="<?smarty $smarty.const.EXTERNAL_URL ?>/jquery/jquery.1.11.1.min.js"></script>
<script src="<?smarty $smarty.const.EXTERNAL_URL ?>/jquery/jquery-ui.1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="<?smarty $smarty.const.EXTERNAL_URL ?>/DataTables/datatables.css"/>
<script type="text/javascript" src="<?smarty $smarty.const.EXTERNAL_URL ?>/DataTables/datatables.min.js"></script>
<script type="text/javascript" src="<?smarty $smarty.const.EXTERNAL_URL ?>/DataTables/Buttons-1.5.1/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="<?smarty $smarty.const.EXTERNAL_URL ?>/DataTables/Select-1.3.0/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="<?smarty $smarty.const.EXTERNAL_URL ?>/bootstrap/js/bootstrap.min.js"></script>

kthorngren

In the CDN list I don't see where you are loading the Datatables responsive library (responsive.js and responsive.css). In your localhost files it is possible that using the Download Builder you combined responsive with datatables.js in /DataTables/datatables.min.js. Open the file and, if this is the case, you will see an indication the responsive.js is included. What do you find?

Kevin

mikepfly2

Geez. Thank you. Yes, this is from my local datatable.min.js:

 * This combined file was created by the DataTables downloader builder:
 *   https://datatables.net/download
 *
 * To rebuild or modify this file with the latest versions of the included
 * software please visit:
 *   https://datatables.net/download/#dt/jszip-2.5.0/pdfmake-0.1.32/dt-1.10.16/b-1.5.1/b-html5-1.5.1/b-print-1.5.1/fc-3.2.4/fh-3.1.3/r-2.2.1
 *
 * Included libraries:
 *   JSZip 2.5.0, pdfmake 0.1.32, DataTables 1.10.16, Buttons 1.5.1, HTML5 export 1.5.1, Print view 1.5.1, FixedColumns 3.2.4, FixedHeader 3.1.3, Responsive 2.2.1

I added to my production dependency call:

      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.5/css/responsive.dataTables.min.css"/>
      <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.5/js/dataTables.responsive.min.js"></script>

And all works as expected. How I didn't hear this was an issue for over a year from my client is another quandary.

Thank you again!