Tab from one table to another
Tab from one table to another
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>
This discussion has been closed.
Answers
table.on( 'key-focus', function ( e, datatable, cell ) {
editor.inline( cell.index(), {
onBlur: 'submit'
} );
} );
table.on( 'key-focus', function ( e, datatable, cell ) {
editor.inline( cell.index(), {
onBlur: 'submit'
} );
} );