Two tables with two editors

fiofiotte

Hi,

I'm using two datatables on the same page with two editors instance.

In order to use the RowReorder extension, I need to attach the editor instance :

rowReorder: {
        dataSrc: 'sequence',
        editor:  editor
    }

but the thing is that I'm having just one DataTable function to initialize my two tables, because they have exactly the same characteristics but different data (sets by sending d.cat to the server-side) (the lines below once) :

var oTable = $('.display').DataTable( {
        ajax: {
            url: "../php/staff.php",
            type: "POST",
            data: function(d, table){
                        d.re_ne = re_ne;
                        d.cat = table.nTable.dataset.cat;
                    }
        },
        columns: [
            { data: "order_id", visible: false, searchable: false, orderable: true },
            { data: "cat", visi ....etc etc etc

Then I had to initialize two editors for the inline edit/delete function (lines below twice with different editor name and different table id) :

editor = new $.fn.dataTable.Editor( {
        "ajax": "../php/staff.php",
        "table": "#example",
        "fields": [ {
                "label": "Order_ID:",
                "name": "order_id"
            }, {
                "label": "Cat:..... etc etc etc

but now, if I leave the code like that, the RowReorder will work only on the datatable attached to the editor defined on the datatable initialization.

So, to try to get it work, I tried not to give an editor instance on the RowReorder initialization but using .on('row-reorder') instead :

oTable.on( 'row-reorder', function ( e, details, edit ) {
        editor
            .edit( edit.nodes, false, {
                submit: 'changed'
            } )
            .multiSet( edit.dataSrc, edit.values )
            .submit();
    } );

Then, to get the right instance of the Editor, I wanted to get the Editor's API like that :

var myTable = $('#example').DataTable();
var editor = myTable.editor();

editor.create( 2 );

but when I implement those lines to the function above :

oTable.on( 'row-reorder', function ( e, details, edit ) {

        // GETTING THE EDITOR INSTANCE BY GETTING THE TABLE ID
        var editor = $("#"+e.target.id).DataTable().editor();

        // SUBMIT CHANGES WITH THE RIGHT EDITOR FOR THE RIGHT DATATABLE
        editor
            .edit( edit.nodes, false, {
                submit: 'changed'
            } )
            .multiSet( edit.dataSrc, edit.values )
            .submit();
    } );

It returns editor.edit is not a function !!!

Is there a way I can do that without creating two datatable initializations ?
Maybe by modifying the rowReorder.js file to let the initialization detects which datatable is being initialized ?

hummmm.... !

I hope I'm clear enough. Thanks in advance

C.

allan

Thanks for the details. I'm afraid that at the moment it looks like this bug will prevent the use of a single initialisation object for the two DataTables - you would need to use two different DataTables initialisations.

I will look into how to resolve this though - although it won't be a short term fix I'm afraid.

Allan

fiofiotte

Hi Allan,

I have finally figured out how to get it works :) If someone needs...

On my last piece of code, I have just replaced the editor's instance call by window[editor] like :

oTable.on( 'row-reorder', function ( e, details, edit ) {
 
        // GETTING THE EDITOR INSTANCE BY GETTING THE TABLE ID
        var editor = $("#"+e.target.id).DataTable().editor();
 
        // SUBMIT CHANGES WITH THE RIGHT EDITOR FOR THE RIGHT DATATABLE
        window[editor]
            .edit( edit.nodes, false, {
                submit: 'changed'
            } )
            .multiSet( edit.dataSrc, edit.values )
            .submit();
    } );

Now, three tables using one (and the same) DataTable's initialization works with three editors.

BR

C.

allan

Nice one - thanks for posting back.

Allan