Keytables and exiting Table after event
Keytables and exiting Table after event
HI All
I have looked around but could not find a solution for this problem.
I have a search which uses multiple fields and is rendered at the top to then Json display data in a datatable.
The issue is moving around with Keyboard navigation only and when i tab into the table using keytables to then use the keys.event.action function works but I want to be able to deselct this table and go back to the top form for people to redo a search narrowing there fields (not reloading the whole page or losing the data already displaying.
The perfect key that works is the exc key but i am not sure how to use that inside a bound lets say F2 key.
I have tried using the key.block = true on action and this stops the keytable being active but doesnt deselect the current selected highlighted cell and also doesnt allow for the key.block = false to be reactivated again so the user can then move back into the datatable if they decide they do not need to do another search.
Please Some Ideas
Below is the code I am using
[code]
var aSelected = [];
var oTable = $('#example').dataTable( {
"sAjaxSource": "/modules/server_processing.php",
"sScrollY": 400,
"sScrollX": "100%",
"sScrollXInner": "100%",
"bFilter": false,
"bJQueryUI" : true,
"bSort": false,
"bPaginate": false,
"sPaginationType": "full_numbers",
"iDisplayLength": 100,
"bLengthChange": false,
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender */
$("input#search").focus();
$("input#search").attr('disabled', 'disabled');
aoData.push({"name": "surname_val", "value": $("input#surname").val()});
aoData.push({"name": "othername_val", "value": $("input#othername").val()});
aoData.push({"name": "streetname_val", "value": $("input#streetname").val()});
aoData.push({"name": "suburb_val", "value": $("select#suburb").val()});
$.getJSON( sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json)
$("input#search").removeAttr("disabled");
} );
},
"bProcessing": false,
"bServerSide": false,
"bRetrieve":false,
"bDestroy":true
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( jQuery.inArray(aData.DT_RowId, aSelected) !== -1 ) {
$(nRow).addClass('row_selected');
}
}
});
var keys = new KeyTable( {
"table": document.getElementById('example'),
"datatable": oTable,
"form": true,
"tabIndex": 6,
"focus": [ 0, 0 ],
"initScroll": false
});
[/code]
HTML setup is
[code]
<!--- Search fields are here -->
SURNAME
OTHER NAMES
STREET ADDRESS
[/code]
I have looked around but could not find a solution for this problem.
I have a search which uses multiple fields and is rendered at the top to then Json display data in a datatable.
The issue is moving around with Keyboard navigation only and when i tab into the table using keytables to then use the keys.event.action function works but I want to be able to deselct this table and go back to the top form for people to redo a search narrowing there fields (not reloading the whole page or losing the data already displaying.
The perfect key that works is the exc key but i am not sure how to use that inside a bound lets say F2 key.
I have tried using the key.block = true on action and this stops the keytable being active but doesnt deselect the current selected highlighted cell and also doesnt allow for the key.block = false to be reactivated again so the user can then move back into the datatable if they decide they do not need to do another search.
Please Some Ideas
Below is the code I am using
[code]
var aSelected = [];
var oTable = $('#example').dataTable( {
"sAjaxSource": "/modules/server_processing.php",
"sScrollY": 400,
"sScrollX": "100%",
"sScrollXInner": "100%",
"bFilter": false,
"bJQueryUI" : true,
"bSort": false,
"bPaginate": false,
"sPaginationType": "full_numbers",
"iDisplayLength": 100,
"bLengthChange": false,
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender */
$("input#search").focus();
$("input#search").attr('disabled', 'disabled');
aoData.push({"name": "surname_val", "value": $("input#surname").val()});
aoData.push({"name": "othername_val", "value": $("input#othername").val()});
aoData.push({"name": "streetname_val", "value": $("input#streetname").val()});
aoData.push({"name": "suburb_val", "value": $("select#suburb").val()});
$.getJSON( sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json)
$("input#search").removeAttr("disabled");
} );
},
"bProcessing": false,
"bServerSide": false,
"bRetrieve":false,
"bDestroy":true
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( jQuery.inArray(aData.DT_RowId, aSelected) !== -1 ) {
$(nRow).addClass('row_selected');
}
}
});
var keys = new KeyTable( {
"table": document.getElementById('example'),
"datatable": oTable,
"form": true,
"tabIndex": 6,
"focus": [ 0, 0 ],
"initScroll": false
});
[/code]
HTML setup is
[code]
<!--- Search fields are here -->
SURNAME
OTHER NAMES
STREET ADDRESS
[/code]
This discussion has been closed.
Replies
Thanks,
Allan
I also ended up having to use a div tag solution that is not so perfect so that keytables only moves row by row I am not sure if there was another way to suppress the row cells and keep it as row only movement. I am data tables to get data show as list and keyboard friendly to then action - submit a record rather than direct table editing. I am not sure if I am going about it correctly but think json was my only real option to parse the data in a Div type setup to keep it as a block row. NOw I am facing issues of ID linking
> I am not sure if there was another way to suppress the row cells and keep it as row only movement
Currently - no there is not. It is something I want to add longer term though.
Allan
Happy Happy Oh appologies I totally forgot to put my code into the code format. Fixed it up now :)
how do i get he value of the tr id on action in keypress. As I am using a div tag my data is all HTML and I have set a special "DT_RowId" =>
at the moment i return the following
I want to just get the row_123 value to use to send data.
SURNAME
FIRST NAME
ADDRESS
Allan