Add multiple css and javascript resource files

If your spotfire admin has html sanitation turned on (which is the default option) for textareas, then you can load css and js by using the script below. HTML sanitation prevents to add certain tags and attributes to the html code in a textarea, you can load them like this:

$.when(
    $.getScript(js1),
    $.getScript(js2),
    $.getScript(jsN),
    $("<link/>", { "rel": "stylesheet", "type": "text/css", "href": css1 }).appendTo("head"),
    $("<link/>", { "rel": "stylesheet", "type": "text/css", "href": css2 }).appendTo("head"),
    $("<link/>", { "rel": "stylesheet", "type": "text/css", "href": cssN }).appendTo("head"),
    $.Deferred(function( deferred ){
        $( deferred.resolve );
    })
).done(yourInitFunctionHere);

Example using datatables jquery plugin:

html:
<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Age</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tiger Nixon</td>
         <td>System Architect</td>
         <td>Edinburgh</td>
         <td>61</td>
         <td>2011/04/25</td>
         <td>$320,800</td>
      </tr>
      <tr>
         <td>Garrett Winters</td>
         <td>Accountant</td>
         <td>Tokyo</td>
         <td>63</td>
         <td>2011/07/25</td>
         <td>$170,750</td>
      </tr>
      <tr>
         <td>Ashton Cox</td>
         <td>Junior Technical Author</td>
         <td>San Francisco</td>
         <td>66</td>
         <td>2009/01/12</td>
         <td>$86,000</td>
      </tr>
      <tr>
         <td>Cedric Kelly</td>
         <td>Senior Javascript Developer</td>
         <td>Edinburgh</td>
         <td>22</td>
         <td>2012/03/29</td>
         <td>$433,060</td>
      </tr>
      <tr>
         <td>Airi Satou</td>
         <td>Accountant</td>
         <td>Tokyo</td>
         <td>33</td>
         <td>2008/11/28</td>
         <td>$162,700</td>
      </tr>
   </tbody>
</table>

script:

//required css and js resources
var js1 = "//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"
var css1 = "//cdn.datatables.net/1.10.3/css/jquery.dataTables.min.css"

//add javascript resources
$.when(
   $.getScript(js1),
    $("<link/>", { "rel": "stylesheet", "type": "text/css", "href": css1 }).appendTo("head"),
    $.Deferred(function( deferred ){
        $( deferred.resolve );
    })
).done(function(){
       $('#example').DataTable();
});



Previous
Next Post »