I am having trouble getting DataTables to load on my tables.

I am using Drupal 7.36 and DataTables v1.10.6
dataTables shows it is enabled for Forena

I created the following skininfo file named load_datatables.skinfo:

;
;  Example info file that will use the datatables plugin if loaded in sites/all/modules or reports directory.
;
;  Scripts are searched for first in the reports directory, second in the site relative file system 
;  and thirdly in the sites/all/libraries folder. 
;  
name = Load dataTables
description = Forena Skin to load dataTables
; ------------------------------------------------------
; Javascript libraries can be added.  Forena will
; automatically search sites/all/libraries in 
; addition to the report directories. 
; 
scripts[] = dataTables/media/js/jquery.dataTables.min.js
scripts[] = load_datatables.js
; -----------------------------------------------------------
;  Sample stylesheet inclusion the usual types are supported (e.g. screen, print)
;  Also not that if you ar using mMPDF or Prince, you can speify stylesheets 
;  in the form
; 
stylesheets[all][] = table_padding.css
; ---------------------------
; 
;  Sample graphing Graph defaults uncomment to experiment.
; 
; FrxSVGGraph[colors][] = red 
; FrxSVGGraph[colors][] = blue
;---------------------------
; Settings for Forena Classes
; 
; The following settings can be used to further control how forena renders reprots 
; 
; Disable helper classes such as even and odd 
; FrxReport[noHelperClasses] = true
; 
; Control the root element taga name using teh following. 
; FrxXMLDoc[rootElementName] = node 
; ---------------------------------------------------------
; Arbitrary values may be added and referenced in the report as
; using the skin data context.  For exmaple if you uncomment the following: 
; 
; company_name = My Cool Company
test = Testing Arb Values
; 
; Then you could reference {skin.company_name} anywhere in your report.
FrxSVGGraph[legend_position] = outer right -5 5
FrxSVGGraph[add_js] = TRUE
FrxSVGGraph[semantic_classes] = 1

And created the following js file load_datatables.js

<script id="frxsrc-4">
  (function ($) {
    Drupal.behaviors.load_dataTables = {
      attach: function (context, settings) {
  $('table').dataTable();
      }
    };
  })(jQuery);
</script>

I placed both in the /sites/default/files/reports folder.

I set up a test arbitrary value as well.

I set the new skin as the default and also as the skin for a specific table in layout. I inserted a refernece in layout for the arbitrary value to make sure the skin was being used.

The arbitrary test value displays on the page, but I don't get any of the dataTable functionality. I set the debug to show scripts being excecuted and only the sql query shows in the message block.

It seems I have followed all of the examples and documentation, but am obviously missing something. Any help would be appreciated.

Comments

metzlerd’s picture

Sorry to have been so late in responding. Does the javascript console show any error messages? I'm starting to suspect that latest dataTables might be incompatible with the JQuery version shipped with Drupal. What version of dataTables are you using?

Hookset Media’s picture

Sorry, did not see your response until now.

I have tried both 1.10.6 and 1.9.3

I just pulled up the page with Firebug activated and got this error...

SyntaxError: expected expression, got '<'
<script id="frxsrc-4">

Thanks

metzlerd’s picture

Ahh of course, you don't need a script tag in the .js file, that's only for putting javascript inline in the html document. Remove the script tags from the html files and see if that helps/changes the error.

Hookset Media’s picture

Thanks metzlerd,

I hope this helps some other js noob too.

I was able to get it to work on 2 reports, but I have some artifact that is producing the same error on the main report. I reset all the layouts to use the default skin and set the default skin to my custom skin. Loads the js on 2 reports, but not the main one. and throws out the original error. Very strange. I have cleared caches etc.

Will keep trying to figure out the difference and report back. If you have any insight, it would be appreciated.

On a side note, just FYI, I am using stock Bartik 7.36. In IE the search box displays correctly, in Firefox, it floats left of the table. I went into the css section under layout for a report and added

.dataTables_filter {
     float: none;
 }

And it displayed correctly.

metzlerd’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.