Keytables and exiting Table after event

martyh888

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]

allan

If I understand correctly, are you basically looking for a 'blur' method in KeyTable, that you could hook into? If this is the case, could you confirm so and I will look at having that in forthwith.

Thanks,
Allan

martyh888

Yes that is correct. At the moment you can have 2 areas on the page active which is not very good. and simple setting focus to the search area still makes tab work inside the keytable.

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

allan

I've just committed an 'fnBlur' API method for KeyTable, which you can pick up from the current 1.1.8.dev nightly on the downloads page ( http://datatables.net/download/ ) or from Github.

> 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

martyh888

Allan perfect.

Happy Happy Oh appologies I totally forgot to put my code into the code format. Fixed it up now :)

martyh888

Oh one last thing

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

There isn't a special DataTables way of doing that, you would just use normal DOM or jQuery methods - such as trNode.getAttribute('id') or similar. So you need a reference to the node you want to get the ID from.

Allan