best practices - putting js in external file?

gforster

Is it best to place the javascript sections for editor/datatables in an external .js file? If so, what's the best way to do that? I tried putting everything in between the <script> tags below in a separate table.js file and sourcing it in the html, but it didn't work (0 tables loaded - debug.datatables.net/iwekuy ).

 <script type="text/javascript" language="javascript" class="init">
     var editor; 
 
     $(document).ready(function() {
         editor = new $.fn.dataTable.Editor( {
             ajax: "php/Tables/volumes_table.php",
             table: "#example",
             fields: [ {
                     label: "Volume:",
                     name: "VOLUMES.name",
                     type: "select",
                     placeholder: "Select the Volume Name"
                 }, {
                     label: "Hostname",
                     name: "VOLUMES.server_id",
                     type: "select",
                     placeholder: "Select the Hostname"
                 }, {
                     label: "Development Level",
                     name: "VOLUMES.devlvl_id",
                     type: "select",
                     placeholder: "What is the Dev Level"
                 }, {
                     label: "OS:",
                     name: "VOLUMES.os_id",
                     type: "select",
                     placeholder: "Select An Operating System"
                 }, {
                     label: "Location:",
                     name: "VOLUMES.location_id",
                     type: "radio"
                 }, {
                     label: "Services:",
                     name: "SUPPRTSVCS[].id",
                     type: "checkbox"
                 }, {
                     label: "Group:",
                     name: "VOLUMES.srvrgrp_id",
                     type: "select",
                     placeholder: "Select the Group"
                 }, {
                     label: "description",
                     name: "VOLUMES.description"
                 }
             ]
         } ); 
         $('#example').DataTable( {
             dom: "Bfrtip",
             paging: false,
             scrollY: 500,
                 ajax: {
                     url: "php/Tables/volumes_table.php",
                     type: 'POST'
             },
             columns: [
                 { data: "VOLUMES.name"},
                 { data: "SERVERS.name" },
                 { data: "DEVLVL.name" },
                 { data: "OS.name"},
                 { data: "LOCATION.name"},
                 { data: "SUPPRTSVCS", render:"[,].name"},
                 //{ data: "MODEL.name"},
                 { data: "SRVRGRP.name"},
                 // Description Is Last For Sake Of Readability
                 { data: "VOLUMES.description" }
             ],
             select: true,
             buttons: [
                 { extend: "create", editor: editor },
                 { extend: "edit",   editor: editor },
                 { extend: "remove", editor: editor },
                 {
                     extend: 'collection',
                     text: 'Export',
                     buttons: [
                             'copy',
                             'excel',
                             'csv',
                             'pdf',
                             'print'
                     ]
                 }
             ]
          } );
 
 } );
 </script>

kthorngren

You shouldn't have to do anything special.. Probably will need to remove the script tags but I think you eluded to that above. Make sure the file is in a path the web server can access then add the following line in place of the above:
/table.js">

You can verify the script is being loaded through the dev tools in your browser. For Chrome go to View > Developer > Developer Tools. Click on the Network tab and load your page. There you will see if the script loads.

Kevin

allan

Is it best to place the javascript sections for editor/datatables in an external .js file?

To my mind it really comes down to how you want to maintain the files. Personally I use small individual files and then a build step before publishing the site to concatinate them all together. What you don't want to end up with is lots of HTTP requests for individual small files. While that isn't an issue with HTTP/2, that isn't widely enough deployed to be useful yet (imho ).

Also, Kevin gives sound advice above!

Allan