ColReorder and Bootstrap modals

rf1234

I am using quite a few data tables shown in Bootstrap 3 modals that are shown on custom button click.
This does not work with ColReorder enabled. On first click the table isn't loading. On second button click it does. Editor doesn't work at all.
Took me a while to figure out this was caused by colReorder. There was only one error message using Editor that indicated this.
Solution: Disable ColReorder for data tables in Bootstrap modals.

allan

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

Thanks,
Allan

rf1234

@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

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

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

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