Buttons not appearing/Editor not initialising

Buttons not appearing/Editor not initialising

RhinoLexRhinoLex Posts: 7Questions: 2Answers: 0

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"
         }
      }
});

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • RhinoLexRhinoLex Posts: 7Questions: 2Answers: 0
    edited August 2021


    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,
    .....
    
  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    AFAIK require() only accepts one parameter.

  • RhinoLexRhinoLex Posts: 7Questions: 2Answers: 0

    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,
    .....
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • RhinoLexRhinoLex Posts: 7Questions: 2Answers: 0

    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

  • RhinoLexRhinoLex Posts: 7Questions: 2Answers: 0

    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.

Sign In or Register to comment.