Buttons not appearing/Editor not initialising

RhinoLex

I can't give a link to a test case right now, I can try to spin up something that is publicly accessible if required.

I've downloaded datatables with all the required extensions via the download builder, minified & concatenated, which I thought meant that you only had to require the dataTables js file & not have to reference the individual editor/button js files.

With the following code, I get an error in the console "$.fn.dataTable.Editor is not a constructor"

Debugger code (debug.datatables.net): https://debug.datatables.net/bookmarklet/DT_Debug.js?rand=1629801917693

require(['/RIT_2_0_0/LIBRARIES/DataTables/DataTables-1.10.25/js/jquery.dataTables.min.js'], function(){
   let editor = new $.fn.dataTable.Editor({
      table: '#companyInfoTable'
   });
   $('#companyInfoTable').DataTable({
      dom: 'Bfrtip',
      destroy:true,
      data:tableData,
      pageLength:20,
      columns:[
         {title: "Organisation ID", className: 'dt-center', name:'hideMe'},
         {title: "Organisation", className: 'dt-center'},
         {title: "Branch", className: 'dt-center'}
      ],
      responsive: {
         details: {
            type: 'column',
            target: 'tr'
         }
      },
      select:true,
      createdRow: function( row, data, dataIndex ) {
            $(row).find('td:eq(0)').attr('id', 'orgId' + dataIndex);
      },
      buttons: [
            {extend: 'selectAll', editor:editor, text:'Select All'},
            {extend: 'selectNone', editor:editor, text:'Deselect All'},
            {extend: 'excel', text:'Export'}
      ]
});

If I remove the editor declaration and just have the buttons as selectAll/selectNone, there are no errors in the console, the table renders but the buttons do not appear

Debugger code (debug.datatables.net): https://debug.datatables.net/bookmarklet/DT_Debug.js?rand=1629802133756

require(['/RIT_2_0_0/LIBRARIES/DataTables/DataTables-1.10.25/js/jquery.dataTables.min.js'], function(){
   $('#companyInfoTable').DataTable({
      dom: 'Bfrtip',
      destroy:true,
      data:tableData,
      pageLength:20,
      columns:[
         {title: "Organisation ID", className: 'dt-center', name:'hideMe'},
         {title: "Organisation", className: 'dt-center'},
         {title: "Branch", className: 'dt-center'}
      ],
      responsive: {
         details: {
            type: 'column',
            target: 'tr'
         }
      },
      select:true,
      createdRow: function( row, data, dataIndex ) {
            $(row).find('td:eq(0)').attr('id', 'orgId' + dataIndex);
      },
      buttons: [
         'selectAll',
         'selectNone'
      ],
      language:{
         buttons:{
            selectAll:"Select all items",
            selectNone:"Select none"
         }
      }
});

allan

I get an error in the console "$.fn.dataTable.Editor is not a constructor"

Suggests that the Editor Javascript file is not being loaded. It doesn't appear in your require line. Is that how you are loading your JS files, or do you have another method?

If I remove the editor declaration and just have the buttons as selectAll/selectNone, there are no errors in the console, the table renders but the buttons do not appear

My guess is that Buttons also isn't being loaded, although without a test case I can't be sure. The debug code from the bookmarklet should actually be a 6-7 character code that is shown once the upload is complete. The URL linked above is just the debugger loading script.

Thanks,
Allan

RhinoLex

Hi Allan,

Ahh ok, yes, loading files via require. I modified the require statement to include the editor .js file as below but now in the console, I get

GET http://URL/datatables.net.js?%BUILDVERSION% net::ERR_ABORTED 404
Script error for: datatables.net

Not entirely sure why it's looking in the root of the web app for datatables.net.js but interestingly, it does seem to be at least getting the jquery.dataTables & dataTables.editor files ok (see screenshot)

Debug code: uxobaz

require(['/RIT_2_0_0/LIBRARIES/DataTables/DataTables-1.10.25/js/jquery.dataTables.min.js','/RIT_2_0_0/LIBRARIES/DataTables/Editor-2.0.4/js/dataTables.editor.min.js'], function(){
   $('#companyInfoTable').DataTable({
      dom: 'Bfrtip',
      destroy:true,
      data:tableData,
      pageLength:20,
.....

tangerine

AFAIK require() only accepts one parameter.

RhinoLex

Good to know...I tried nesting the require statements but get the same results.

Again, looking in the Network tab in the console, it seems to be loading the Editor js file just fine

require(['/RIT_2_0_0/LIBRARIES/DataTables/DataTables-1.10.25/js/jquery.dataTables.min.js'], function(){
   require(['/RIT_2_0_0/LIBRARIES/DataTables/Editor-2.0.4/js/dataTables.editor.min.js'], function(){
      $('#companyInfoTable').DataTable({
         dom: 'Bfrtip',
         destroy:true,
         data:tableData,
         pageLength:20,
.....

allan

I think I'm going to need to be able to see the page I'm afraid. You can PM me a private link by clicking my forum user name above and then "Send message".

Thanks,
Allan

RhinoLex

Hi Allan,

No problem. It will take me a few hours to spin up a demo site. I'll let you know when it's available

RhinoLex

HI Allan,

Demo site is finally up and running, I've pinged you a message with details. Let me know if you need anything else.

Cheers
Lex.