SOLVED: How to do tabs with editor

INTONE

I have searched long and hard for this. I was only given little clues here and there but no example posted. I thought it would be good to get others started if I post how I did it:

 editor = new $.fn.dataTable.Editor({
        ajax: {
            url: 'file.php'
        },
        table: '#tableID',
        fields: [
          {fields object}
        ]
    });

editor.on( 'open displayOrder', function ( e, mode, action) {
        if ( mode === 'main' && action !== 'remove' ) {
            
            //create tabs html
            var html = '<div class="tabs-container">'+
                        '<ul class="nav nav-tabs">'+
                            '<li class="active"><a data-toggle="tab" href="#tab-1">General</a></li>'+
                            '<li class=""><a data-toggle="tab" href="#tab-2">Insurance</a></li>'+
                            '<li class=""><a data-toggle="tab" href="#tab-3">Statement</a></li>'+
                        '</ul>'+
                        '<div class="tab-content">'+
                            '<div id="tab-1" class="tab-pane active">'+
                                '<div class="panel-body tab-1">'+
                                '</div>'+
                            '</div>'+
                            '<div id="tab-2" class="tab-pane">'+
                                '<div class="panel-body tab-2">'+ 
                                '</div>'+
                           '</div>'+
                            '<div id="tab-3" class="tab-pane">'+
                                '<div class="panel-body tab-3">'+
                                '</div>'+
                            '</div>'+
                         '</div>'+
                         '</div>';
            
            //add html to dom
            $('div.DTE_Form_Content').append( html );

            //move the editor elements to respective tab
            $( editor.node( ['field1','field2'] ).appendTo('.tab-1');
            $( editor.node( ['field3','field4'] )).appendTo('.tab-2');
            $( editor.node( ['field5','field6'] )).appendTo('.tab-3');
          
        }
            
        } )

allan

Perfect - nice one! This is something that is going to be built into future versions (likely not the up coming 1.6, but some future version).

Regards,
Allan

INTONE

Hi Allan,

Speaking of which do you have a road map for editor or datatables? It keeps the salivating going until I am fed with more cool new features.

allan

This all that is public at the moment. The thing is that the development is fluid and things keep changing, so I'm not currently publishing detailed plans.

Allan

5320835@qq.com

Thank you Guys, It works and help me to solve it easily.

Furburger

Thanks InTone!!

Awesome code - it helped me a lot.

brendons

This is awesome, thanks InTone. Unfortunately it's not quite working for me. I can see all the tabs but only the fields in tab 1 are visible. When I click tab 2 or tab 3 the display doesn't change. No js errors so it's probably my css or bootstrap.
BTW there's a missing ) after ['field2']).

Allan, IMO making the Editor more versatile like this would get you better market share than some of the more technical items you currently have on the road map. Please consider raising the priority.
Sadly I don't yet have the skill required to create a display controller but this helps me tidy up some of my 'ugly' editors that have many fields.

allan

It is coming . 1.6 is going to include massively improved options for this sort of thing and custom layouts. It should drop next week.

Allan

Furburger

Awesome - can't wait for 1.6.

Will you have the time to add the searchable functionality to the colvis ,i.e. to allow us to make newly visible columns searchable.

If not, it can wait for 1.6.x because it is just a "nice to have" at this stage, but we will need that in production eventually.

allan

That's a DataTables issue rather than Editor. There will be a DataTables release alongside Editor 1.6 (DataTables 1.10.13) but that is just a bug fix release rather than new features. It will be the next major version of DataTables before that new searchable API is included (I don't yet have a time frame for that I'm afraid).

Allan