Create a table a second time (after deleting) will not work.

Paykoman

Link to test case:
https://got-tools.com/en/app/analyze.html
But is just for registered users but you can adde me on Discord and i will show it: paykomanvll

Description of problem:
I showed you on the JS code how is my way to create the table.
The table (DOM) will be removed if the inline window are closed. But the users can click the "Add button" and the table will be created again.

My goal was to start always by zero and create a fully new instance.

The problem is the columns are broken, the table head cols has not the same size and the first col is anymore fixed !

If i resize the browser any event will be fired and then the table works fine, maybe any can tell me how i can fire the resizefunction manually? I tryed by the draw() functions but dont solved my problem

Description of problem:

function createEvalForm(){
    // create member table
    var table = $('<table>', {id: 'memberlist', class: 'cell-border', cellspacing: '0', width: '100%'}),
        parts = evalForm[opt.section](evalMember); // return array with table parts [thead, tbody, tfoot]
    
    // parse botnames of each member - AFTER the members was parsed so we can use his row on each botname
    // this create the table rows
    evalMember.forEach(function(member){
        if( member.bname === null ){ member.bname = ''; }
        member.bname.split(',').forEach(function(bname){
            opt.textNodes[bname] = opt.textNodes[member.name]; // botname get the same node as real name
        });
    });
    
    $('#newEva').append( $('<form>', {id: 'sendEval', class: 'saveEval', method: 'post', action: location.href})
        .append( $('#saveEvalmenu').append( (parts[3]) ? $('#modeSelector') : null) )
        .append(table.append(parts[0]).append(parts[1]).append(parts[2])) // add header, body and footer to the table
        .append(
            $('<div>', {class: 'text-center'})
                .append( $('<button>', {type: 'submit', 'data-cmd': 'add', 'data-id': 'NA', 'data-token': 'NA', text: txt.get('al', 'save')}).button() )
        )
        .append( $('<input>', {type: 'hidden', name: 'process', value: 'saveeva'}) )
    );
    
    // create dataTable
    var targets = [];
    for( let i = 1; i < parts[0].find('th').length; i++ ){ targets.push(i); }
    
    memberTable = new DataTable('#memberlist', {
        destroy: true, // destroy old instance if exist one
        fixedHeader: true,
        fixedColumns: true,
        scrollX: '100%',
        scrollY: '450px',
        bPaginate: false, //hide pagination
        bInfo: false, // hide showing entries
        columnDefs: [{targets: targets, "searchable": false, "orderable": false}]
    });
}

I would be very happy if anyone can help me.

Thank you.

PS: very great plugin

kthorngren

The problem is the columns are broken, the table head cols has not the same size and the first col is anymore fixed !

Do you get errors in the browser's console?

Possibly you will need to use destroy() instead of destroy. Maybe in the form close event or use DataTable.isDataTable() in your createEvalForm() function and if true use destroy().

If you still need help maybe you can build a simple test case that shows you code flow using JS Bin:
https://live.datatables.net/

Kevin

Paykoman

I spend a lot of time to make the test case but the fixed col plugin dont work on it.

https://live.datatables.net/yozuzete/1/watch?html,js,output

The simplest way i think is add me on Discord (paykomanvll), then i can do screenshare and show code and result.

The thing is i already use this on the windows close function:

// this is the windows opener and init the table
$(document).on('click', '#addEvabtn', function(){
    dialogWindow({
        title: txt.get('al', 'addevaluation'),
        content: '#newEva',
        maximizable: false, resizable: false, draggable: false,
        onOpen: newEvalForm, // <----- this is creating the table
        onClose: function(){
            $('#modeSelector').appendTo('#mainMode'); // put back the mode selector
            $('#saveEvalmenu').appendTo('#hiddenEl'); // put back the container to hidden
            // memberTable.destroy(); // destroy table instance !! DONT SOLVE THE PROBLEMS !!
            $('#sendEval').remove(); // remove the form
            firstInsert = true;
        }
    });
});

I tryed a new one, but same, it not solve the design are broken =(

if( memberTable !== null ){ memberTable.destroy(); }  // destroy table instance

// start new instance after the old has destroyed
memberTable = new DataTable('#memberlist', {
    // destroy: true, // destroy old instance if exist one
    fixedHeader: true,
    fixedColumns: true,
    scrollX: '100%',
    scrollY: '450px',
    bPaginate: false, //hide pagination
    bInfo: false, // hide showing entries
    columnDefs: [{targets: targets, "searchable": false, "orderable": false}]
});

It will not work, the header table is broken and the fixed col is not fixed.
Only after i resized the browser then all works fine.

So really, if anyone can contact me on Discord or Skype (paykomanvll) and help about this problem would be very nice.

::EDIT::
And again, if the windows open the first time all works fine, but if user close it and open again then its broken. And you see on both openings the same code would be executed. :-(

kthorngren

if anyone can contact me on Discord or Skype (paykomanvll)

Sorry I don't have a Discord or Skype account. Possibly you can make arrangements with Allan for this type of support.

test case but the fixed col plugin dont work on it.

The load order was wrong. I moved the FixedHeader and FixedColumns CDN links below Datatables.js. The updated test case seems to be working:
https://live.datatables.net/ganokowi/1/edit

I toggled back and forth between create and close but didn't see any issues.

It will not work, the header table is broken and the fixed col is not fixed.

Do you get errors in the browser's console? Do you see the Datatables elements like the search input?

Only after i resized the browser then all works fine.

That does seem strange. Possibly there is a timing issue where Datatables is initialized before the form is shown. In that case you will need to use columns.adjust() once the form is fully visible. See this tabs example.

Kevin

Paykoman

okay make no sense but to put the new instance in a timeOut-function solved the problem.

I mean few lines above we can see the table will be appended to the DOM and on first time opening it work too only on after first opening not.

I did a timeout of 300ms to create the table instance it shoult to work.

grrrr, thank you for your time !!!

// append the DOM
$('#newEva').append( $('<form>', {id: 'sendEval', class: 'saveEval', method: 'post', action: location.href})
    .append( $('#saveEvalmenu').append( (parts[3]) ? $('#modeSelector') : null) )
    .append(table.append(parts[0]).append(parts[1]).append(parts[2])) // add header, body and footer to the table
    .append(
        $('<div>', {class: 'text-center'})
            .append( $('<button>', {type: 'submit', 'data-cmd': 'add', 'data-id': 'NA', 'data-token': 'NA', text: txt.get('al', 'save')}).button() )
    )
    .append( $('<input>', {type: 'hidden', name: 'process', value: 'saveeva'}) )
);

// create dataTable
var targets = [];
for( let i = 1; i < parts[0].find('th').length; i++ ){ targets.push(i); }

setTimeout(function(){
    // we need to make it in a timeout or if we have errors if the window will be opened again
    memberTable = new DataTable('#memberlist', {
        // destroy: true, // destroy old instance if exist one
        fixedHeader: true,
        fixedColumns: true,
        scrollX: '100%',
        scrollY: '450px',
        bPaginate: false, //hide pagination
        bInfo: false, // hide showing entries
        columnDefs: [{targets: targets, "searchable": false, "orderable": false}]
    });
}, 300);

kthorngren

Like I said its possibly the form hasn't become visible when Datatables initializes. If Datatables initializes when hidden it can't accurately calculate the columns widths. It would be interesting to see if columns.adjust() works. Something like this:

// append the DOM
$('#newEva').append( $('<form>', {id: 'sendEval', class: 'saveEval', method: 'post', action: location.href})
    .append( $('#saveEvalmenu').append( (parts[3]) ? $('#modeSelector') : null) )
    .append(table.append(parts[0]).append(parts[1]).append(parts[2])) // add header, body and footer to the table
    .append(
        $('<div>', {class: 'text-center'})
            .append( $('<button>', {type: 'submit', 'data-cmd': 'add', 'data-id': 'NA', 'data-token': 'NA', text: txt.get('al', 'save')}).button() )
    )
    .append( $('<input>', {type: 'hidden', name: 'process', value: 'saveeva'}) )
);
 
// create dataTable
var targets = [];
for( let i = 1; i < parts[0].find('th').length; i++ ){ targets.push(i); }

    memberTable = new DataTable('#memberlist', {
        // destroy: true, // destroy old instance if exist one
        fixedHeader: true,
        fixedColumns: true,
        scrollX: '100%',
        scrollY: '450px',
        bPaginate: false, //hide pagination
        bInfo: false, // hide showing entries
        columnDefs: [{targets: targets, "searchable": false, "orderable": false}]
    });

setTimeout(function(){
    // we need to make it in a timeout or if we have errors if the window will be opened again
    memberTable.columns.adjust();
}, 300);

Kevin

Paykoman

yes it solved the problem too, i think this is the best way.

Thank you.