KeyTable, Jeditable, DataTable with json

KeyTable, Jeditable, DataTable with json

arobasearobase Posts: 2Questions: 0Answers: 0
edited July 2011 in KeyTable

Is it possible to use KeyTable with Datatable using json and jeditable ???

I try this


$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"bPaginate": true,
"bServerSide": true,
"aLengthMenu": [[10,25,50,100,300,-1],[10,25,50,100,300,'Tous']],
"iDisplayLength": 25,
"sAjaxSource": "json/source.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {

$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
"fnDrawCallback": function () {
$('td.edit', this.fnGetNodes()).editable( 'form_edit.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
"submitdata": function ( value, settings ) {
//return { "row_id": this.parentNode.getAttribute('id') };
return {
"test_id": oTable.fnGetData( this.parentNode )[7],
"nom_id": oTable.fnGetData( this.parentNode )[8],
"column": oTable.fnGetPosition( this )[2],

"height": "20px"
} );

"sPaginationType": "full_numbers",
"aaSorting": [[0,'asc']],
"aoColumns": [

{ sClass: "edit" },
{ sClass: "edit" },
{ sClass: "edit" },
{ sClass: "edit" },
{ sClass: "edit" },
{ sClass: "edit" },
{"sWidth": "1px",sClass:"masque"},
{"sWidth": "1px",sClass:"masque"}

"sDom": 'Rlfrtip',
"oLanguage": {
"sSearch": "Recherche :",
"sZeroRecords": "Aucun serveur à afficher",
"sProcessing": "Recherche en cours -",
"sLengthMenu": "Afficher _MENU_ serveurs",
"sInfo": "serveurs de _START_ à _END_ sur _TOTAL_",
"sInfoFiltered": " - filtrés d'un total de _MAX_ serveurs",
"oPaginate": {
"sPrevious": "Page précédente",
"sNext": "Page suivante"
} );

var keys = new KeyTable( {
"table": document.getElementById('example'),
"datatable": oTable
} );

$('#example tbody td').each(function() {
/* Apply a return key event to each cell in the table */
keys.event.action( null, null, function (nCell) {
/* Block KeyTable from performing any events while jEditable is in edit mode */
keys.block = true;

/* Initialise the Editable instance for this table */
$(nCell).editable( function (sVal) {
/* Submit function (local only) - unblock KeyTable */
keys.block = false;
return sVal;
}, {
"onblur": 'submit',
"onreset": function(){
/* Unblock KeyTable, but only after this 'esc' key event has finished. Otherwise
* it will 'esc' KeyTable as well
setTimeout( function () {keys.block = false;}, 0);
} );

/* Dispatch click event to go into edit mode - Saf 4 needs a timeout... */
setTimeout( function () { $(nCell).click(); }, 0 );
} );

var oTableTools = new TableTools( oTable, {
"aButtons": [
{ "sExtends": "copy", "sButtonText": "Copie" },
{ "sExtends": "csv", "sButtonText": "CSV (;)", "sFieldSeperator":";" },
{ "sExtends": "xls", "sButtonText": "CSV (tab)" },
{ "sExtends": "pdf", "sButtonText": "PDF" },
{ "sExtends": "print", "sButtonText": "Impression" }
} );

//positionnement des icones d'export
$('#example').before( oTableTools.dom.container );

} );


Json and Jeditable works but KeyTable not.
Have you got any idea?



  • tedkalawtedkalaw Posts: 12Questions: 0Answers: 0
    Have you made sure that the CSS is correct?
  • arobasearobase Posts: 2Questions: 0Answers: 0

    Yes, if I do the same thing without the ajaxSource it works.
    But I need to load my data with ajax

  • cwraabcwraab Posts: 6Questions: 0Answers: 0
    I have the same issue. My keytable does not initialize when I use ajaxSource. It does when I don't use ajaxSource. Any ideas?
  • cwraabcwraab Posts: 6Questions: 0Answers: 0
    Anybody find a resolution to this?
  • bobbaddeleybobbaddeley Posts: 1Questions: 0Answers: 0
    Me as well. It looks like there are a few problems, and the documentation specifically says it won't work. On the init there's a part where if there's a datatable it will assign the click event to all of the cells in that table. The problem is that there aren't any cells in the table yet, so there is no way to assign the click event. I tried to intercept the fnServerData callback to insert the click events, and I tried turning the click event into a .live('click', _fnClick), but neither worked. So for now I have no clicking to give focus.

    The second problem is that when it does return data, it doesn't have anything to tell it which cell to focus on. I got around this by intercepting the callback like so:

    [code]"fnServerData" : function(sSource, aoData, fnCallback) {
    fnCallback2 = function(a,b,c){
    $.ajax( {
    "dataType" : 'json',
    "type" : "POST",
    "url" : sSource,
    "data" : aoData,
    "success" : fnCallback2

    However, because of the paging autoscroll stuff, it keeps reloading the page, so I had to kill that. Anyway, the result is that so far it's _possible_ to get it to work, but it's a kludge and will break any other datatables trying to use KeyTable.
This discussion has been closed.