Datatables editor slowing down

VinuraD

Hi, I'm running an instance of data tables on a remote ubuntu server. The same application runs on the localhost smoothly and on the remote server it runs the same way without much performance degradation for small entries (4 columns each). But when I try to create from CSV or edit one entry or multiple entries which includes about 20 columns per entry, the editor window keeps buffering all the time (as below, without finishing the operation). However, the data is entered to the DB as well (which can be viewed after refreshing the page). What could be causing this issue and is there a workaround? Thanks!

image

colin

the editor window keeps buffering all

Does it eventually complete? Or does it stay in that state? If it never completes, it might be because the response from the server wasn't as expected. You can check on the browser's network tab what the response was.

Colin

VinuraD

The submit window stays there, checking the network tab I observed that server responds correctly. (returns the data back to the frontend as expected). Only after closing the submit window and refreshing the page I can see that the table is updated. In fact I'm working the same application I'm running on PC.

VinuraD

• the editor works fine as expected for a small table in the same application. It's not working for only one large table. As I observed now, it's not getting the response back from the server as well (which I could not state in my prev. comment; my mistake:( ). The response from the server is properly received for the smaller table. I'm confused here as I did not change anything from my PC setup or did not change the request headers etc. I've enabled CORS on all domains as well.

colin

Are you able to link to the page so we can take a look, please?

Colin

VinuraD

Hi Colin, I resolved that which was partially my mistake as the error was not visible on the containerized app. There was a external connection which was not working since the response was not received from the server. Thanks for reaching out.

But the issue which persists is as I mentioned in one of my prev. questions [https://datatables.net/forums/discussion/65059/dt-editor-csv-import-feature#latest] the browser now throws the "Out of memory" even for a csv file of ~90 records when I try to import. Could you suggest a workaround if there's any?

colin

THat shouldn't happen so something definitely wrong. Are you able to link to the so we can take a look?

Colin

VinuraD

Hi, the app runs on an internal server hence I might not be able to give a link. But referring to this; [https://datatables.net/forums/discussion/62731/import-csv-file], I could observe that there is a 'undefined' value assigned to the variable 'mapped' at the last iteration of the for loop. So I removed that iteration from the loop and now it works. I think that's because I'm removing the field named 'exp' at the beginnig of the function. Am I right or could there be anything else? (I'd appreciate your comment since I'm not very much fluent in JS related stuff) Thanks

function selectColumns ( editor, csv, header ) {
    var selectEditor = new $.fn.dataTable.Editor();
    var fields = editor.order();
    console.log(fields)
 
    for ( var i=0 ; i<fields.length ; i++ ) {
        var field = editor.field( fields[i] );
        //console.log(field.name())
        if (field.name()!='exp'){
        selectEditor.add( {
            label: field.label(),
            name: field.name(),
            type: 'select',
            options: header,
            def: header[i]
        } );
    }else{}}
 
    selectEditor.create({
        title: 'Map CSV fields',
        buttons: 'Import '+csv.length+' records',
        message: 'Select the CSV column you want to use the data from for each field.'
    });
 
    selectEditor.on('submitComplete', function (e, json, data, action) {
        // Use the host Editor instance to show a multi-row create form allowing the user to submit the data.
        editor.create( csv.length, {
            title: 'Confirm import',
            buttons: 'Submit',
            message: 'Click the <i>Submit</i> button to confirm the import of '+csv.length+' rows of data. Optionally, override the value for a field to set a common value by clicking on the field below.'
        } );
        //console.log('qqq')
 
        for ( var i=0 ; i<fields.length-1 ; i++ ) {
            var field = editor.field( fields[i] );
            var mapped = data[ field.name() ];
            console.log(field.name())
            //console.log(mapped)
 
            for ( var j=0 ; j<csv.length ; j++ ) {
                field.multiSet( j, csv[j][mapped] );
            }
        }
    } );
}

colin

There's an odd empty else on line 17, but otherwise at a glance it seems ok. If you can't link to your page, could you perhaps see if you can modify this example here to demonstrate the issue. It would help to debug if we're seeing the same behaviour.

Colin