Tab from one table to another

alord84

How could I Tab from the last editable column to the first of the next table?

var editor; // use a global for the submit and return data rendering in the examples
var editor_2;

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff.php",
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "date"
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    } );

    editor
        .on( 'open', function ( e, type ) {
            if ( type === 'inline' ) {
                // Listen for a tab key event when inline editing
                $(document).on( 'keydown.editor', function ( e ) {
                    if ( e.keyCode === 9 ) {
                        e.preventDefault();

                        // Find the cell that is currently being edited
                        var cell = $('div.DTE').parent();

                        if ( e.shiftKey && cell.prev().length && cell.prev().index() !== 0 ) {
                            // One cell to the left (skipping the first column)
                            cell.prev().click();
                        }
                        else if ( e.shiftKey ) {
                            // Up to the previous row
                            cell.parent().prev().children().last(0).click();
                        }
                        else if ( cell.next().length ) {
                            // One cell to the right
                            cell.next().click();
                        }
                        else {
                            // Down to the next row
                            cell.parent().next().children().eq(1).click();
                        }
                    }
                } );
            }
        } )
        .on( 'close', function () {
            $(document).off( 'keydown.editor' );
        } );

    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this, {
            submitOnBlur: true
        } );
    } );

    var table = $('#example').DataTable( {
        dom: "Tfrtip",
        ajax: "../php/staff.php",
        columns: [
            { data: null, defaultContent: '', orderable: false },
            { data: "first_name" },
            { data: "last_name" },
            { data: "position" },
            { data: "office" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        order: [ 1, 'asc' ],
        tableTools: {
            sRowSelect: "os",
            sRowSelector: 'td:first-child',
            aButtons: [
                { sExtends: "editor_create", editor: editor },
                { sExtends: "editor_edit",   editor: editor },
                { sExtends: "editor_remove", editor: editor }
            ]
        }
    } );
    
    
    
    
    
    
    editor_2 = new $.fn.dataTable.Editor( {
        ajax: "../php/staff.php",
        table: "#example2",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "date"
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    } );

    editor_2
        .on( 'open', function ( e, type ) {
            if ( type === 'inline' ) {
                // Listen for a tab key event when inline editing
                $(document).on( 'keydown.editor', function ( e ) {
                    if ( e.keyCode === 9 ) {
                        e.preventDefault();

                        // Find the cell that is currently being edited
                        var cell = $('div.DTE').parent();

                        if ( e.shiftKey && cell.prev().length && cell.prev().index() !== 0 ) {
                            // One cell to the left (skipping the first column)
                            cell.prev().click();
                        }
                        else if ( e.shiftKey ) {
                            // Up to the previous row
                            cell.parent().prev().children().last(0).click();
                        }
                        else if ( cell.next().length ) {
                            // One cell to the right
                            cell.next().click();
                        }
                        else {
                            // Down to the next row
                            cell.parent().next().children().eq(1).click();
                        }
                    }
                } );
            }
        } )
        .on( 'close', function () {
            $(document).off( 'keydown.editor_2' );
        } );

    $('#example2').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor_2.inline( this, {
            submitOnBlur: true
        } );
    } );

    var table = $('#example2').DataTable( {
        dom: "Tfrtip",
        ajax: "../php/staff2.php",
        columns: [
            { data: null, defaultContent: '', orderable: false },
            { data: "first_name" },
            { data: "last_name" },
            { data: "position" },
            { data: "office" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        order: [ 1, 'asc' ],
        tableTools: {
            sRowSelect: "os",
            sRowSelector: 'td:first-child',
            aButtons: [
                { sExtends: "editor_create", editor: editor_2 },
                { sExtends: "editor_edit",   editor: editor_2 },
                { sExtends: "editor_remove", editor: editor_2 }
            ]
        }
    } );
        
    

    
    
} );

<table id="example" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>

                        <th>First name</th>
                        <th>Last name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th width="18%">Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
            </table>
            
            <table id="example2" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>

                        <th>First name</th>
                        <th>Last name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th width="18%">Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
            </table>

alord84

table.on( 'key-focus', function ( e, datatable, cell ) {
editor.inline( cell.index(), {
onBlur: 'submit'
} );
} );

alord84

table.on( 'key-focus', function ( e, datatable, cell ) {
editor.inline( cell.index(), {
onBlur: 'submit'
} );
} );