Possible to replace underlying data of datatable instead of using 'destroy'?

jibranb

Hi Allan. I have a user list (non-datatable) on the left rail of my web app. When someone selects a user, that users' information is populated on the right.

In one user section I have a DataTable of a user's certifications. Upon first load everything is fine. But when subsequent users users are selected I get the expected 'Cannot reinitialize' error (http://datatables.net/tn/3).

I can get this to work using destroy, but I do notice a performance hit. I don't want to change the features, just replace the list with new content. Is there a way around this?

This may be not how DataTables is supposed to be used, but thought I'd ask just in case.

Aside from different columns, the code I'm working with is exactly like this reorder example:
https://editor.datatables.net/examples/extensions/rowReorder.html

Thanks,
-Jibran

rduncecb

When you select a new user you can use clear to remove the data from the table and then row.add / rows.add to add the new rows.

jibranb

Thanks for the response, @rduncecb.

I got your comments working, but once I start interacting with the new data (editing, reordering) I get pretty strange results. Rows start disappearing. It's seem old data is still being expected or referenced.

    // vars
    var $certs_table = $( '#user_certs' );
    var ajax_url = "ajax/get-certs.php?id=" + user_id;

    // is certs table already a datatable?
    if ( $.fn.dataTable.isDataTable( $certs_table ) ) { 

        // yes, let's make our own call
        console.log( 'reloading certs data...' );

        // get datatable api        
        $certs_table = $certs_table.DataTable();
        
        // clear it out
        $certs_table.clear();
        
        $.post( ajax_url, function( response ) {
            
            console.log( response );
            
            if( response && response.data ) {
                
                $certs_table.rows.add( response.data ).draw();

            }
            
        });

        // move along
        return;
    }

It might be important to note that when I initialize both the Editor and the DataTable, their AJAX URLs are using the ID of the very first user. This seems problematic. I'm not re-initializing on subsequent calls and not sure how to reset the user_id.

    cert_editor = new $.fn.dataTable.Editor( {
        ajax: ajax_url,
        table: $certs_table
            ...
    } );

    var certs = $certs_table.DataTable( {
        dom: 'Bfrtip',
        ajax: ajax_url,
             ...
    } );

Thoughts?

rduncecb

You've got a mix here, you're supplying ajax and also loading data yourself with post. Personally, I would not load rows myself and leave it all up to datatables. Take a look at ajax.url for changing your URL. You could just change the URL, tell the datatable to reload the data and it's all taken care of without using clear