Replies

• allan Posts: 61,635Questions: 1Answers: 10,092 Site admin

  January 2020

  Are you able to give me a link to a page showing that issue please?

  Thanks,
  Allan
• rf1234 Posts: 2,802Questions: 85Answers: 406

  January 2020

  @allan, yes will do. I'll send you credentials etc. in a private message. This one was really hard to find, but I am fine with my solution: My data tables in Bootstrap modals are small so that ColReorder isn't really required for them.
• rf1234 Posts: 2,802Questions: 85Answers: 406

  January 2020 edited January 2020

  This is weird: I am just trying to set up the test case for your, Allan. And now everything works like a charm.

  There is a slight difference to my initial setup. Initially I had set colReorder to true during the setting of my data tables defaults. If I do this and have no additional specification for colReorder in the modal data table definition it does not work.

  The difference to my "normal" data tables is mainly that the code of the modal data tables is only being executed on button click, i.e. it will be much later than the default setting code.

  Now to set up the test case for you I did it differently: I set colReorder to true if the user is Allan Jardine in the individual data table definition which is being executed on button click. And now it works! So the problem seems to be associated with the fact that the modal data tables code is being executed much later than the default setting code.

  This is my default setting code:

  //Data tables default settings
  $.extend( true, $.fn.dataTable.defaults, {
    scrollX: scrollX,
  //      fixedColumns: true,
      fixedHeader: {
          header: fixedHeader,
          headerOffset: $('.navbar-header').outerHeight()
      },
      paging: true,
      colReorder: true,
  //        rowReorder: true, //drag and drop NOT working
      responsive: responsive,
      select: true,
      stateSave: stateSave,
      processing: true,
  //        scroller: true,
      //deferRender: true
  //        scrollY: 1000,
  //        scrollCollapse: true
  //        autoFill: true,
  //        keys: true
  
  } );
  

  With this code colReorder does not work:

  var ctrCategoryWithValueRangeTable = $('#tblCtrCategoryWithValueRange').DataTable( {
      dom: "Bti",
      fixedHeader: false,
      paging: false,
      retrieve: true,
      ajax: {
          url: 'actions.php?action=tblCtrCategoryWithValueRange',
          type: 'POST',
          data: function ( d ) {
              d.parent_id = parentId;
          }
      },
      columns: [ ....
  

  With this code colReorder works like a charm:

  var colReorder = false;
  if ( currentUserId == 218 ) { //Allan Jardine
      colReorder = true;
  }
  
  
  var ctrCategoryWithValueRangeTable = $('#tblCtrCategoryWithValueRange').DataTable( {
      dom: "Bti",
      fixedHeader: false,
      paging: false,
      retrieve: true,
      colReorder: colReorder,
      ajax: {
          url: 'actions.php?action=tblCtrCategoryWithValueRange',
          type: 'POST',
          data: function ( d ) {
              d.parent_id = parentId;
          }
      },
      columns: [........
  

  Will still send you the test case credentials but I will set it up so that it is like the initial case that does not work.

  Could be a Javascript scope problem, couldn't it? The modal data table definition is in a function executed on button click while my "normal" data table definitions are of course not inside a function.
• rf1234 Posts: 2,802Questions: 85Answers: 406

  January 2020

  Sorry, can't set up the test case up for you because it would mean I need to show the problem to all of my users again which I cannot do. Sorry. But maybe the hints above are enough?!
• rf1234 Posts: 2,802Questions: 85Answers: 406

  January 2020 edited January 2020

  Another reason might be the use of "retrieve"?! Just to make it a little easier for you here is a complete example. I changed my work around now to add one line of code to each of my modal data tables:
  "colReorder: true"
  Since the default setting for colReorder which is identical is being ignored for modal data tables this is required to make colReorder work.

  Here is a complete example that works:

  function showHelpTable () {
      
      if ( typeof helpEditor !== 'undefined' ) {
          helpEditor.off('open submitSuccess');
          helpEditor.destroy();
      }
      
      if ( typeof helpTable !== 'undefined' ) {
          helpTable.columns.adjust();
      }
      
      var dragDropText;
      var uploadText;
      var noFileText;
      var processingText;
      var fileReadText;
      if (lang === 'de') {
          dragDropText = 'Drag und Drop zum Hochladen';
          uploadText = 'Dokument auswählen ...';
          noFileText = 'Keine Dokumente';
          processingText = 'Verarbeitung läuft ...';
          fileReadText = 'Dokument wird hochgeladen';
      } else {
          dragDropText = 'Drag and Drop to Upload';
          uploadText = 'Choose Document ...';
          noFileText = 'No Documents';
          processingText = 'Processing ...';
          fileReadText = 'Uploading Document';
      }
      
      var helpEditor = new $.fn.dataTable.Editor({
          ajax: {
              url: 'actions.php?action=tblHelp'
          },
          table: "#tblHelp",
          fields: [
                   {
                  label: lang === 'de' ? 'Bezeichnung:' : 'Name:',
                  name: "document.label"
              }, {
                  type: "hidden",
                  name: "document.type"
              }, {
                  label: lang === 'de' ? 'Dokument(e):' : 'Document(s):',
                  name: "file[].id",
                  type: "uploadMany",
                  display: function ( fileId, counter ) {
                      var fileNameExt = helpEditor.file( 'file', fileId ).name;
                      return renderFilesEditor(fileNameExt);
                  },
                  dragDropText: dragDropText,
                  uploadText:   uploadText,
                  noFileText:   noFileText,
                  processingText: processingText,
                  fileReadText: fileReadText
              }
          ]
      });
  
      helpEditor
          .on('open', function () {
              tooltipsPopups(this);
              this.set( { 'document.type': 0 } ); //help documents
          })
          .on( 'submitSuccess', function ( e, json, data ) {
              ajaxReloadTbls([helpTable]);
              helpTable.order( [0, 'asc'] ).draw();
          });
      
      var dom = "ti";
      var select = false;
      if ( usrType === "L" ) {
          dom = "Bti";
          select = {            
              style:    'single',
              selector: 'td:not(:last-child)'
          };
      }        
      
      var helpTable = $('#tblHelp').DataTable({
          dom: dom,
          fixedHeader: false,
          paging: false,
          retrieve: true,
          colReorder: true,
          ajax: {
              url: 'actions.php?action=tblHelp'
          },
          columns: [
              {  data: "document.label" },
              //            mjoin returns row.tableArray[].field]
              {   data: null,
                  render: function ( data, type, row ) {
                      return renderFilesDataTable(row.file);                  
                  }
              },
              {   data: "document.update_time" }
          ],
          columnDefs: [
              // targets may be classes
              {   targets: "hiddenCols", visible: false }
          ],
          select: select,    
          buttons: [
              {  extend: "create", editor: helpEditor  },
              {  extend: "edit",   editor: helpEditor  },
              {  extend: "remove", editor: helpEditor  }
          ]
      });
          
      ajaxReloadTbls([helpTable]);
      helpTable.order( [0, 'asc'] ).draw();
  }