KeyTable, Jeditable, DataTable with json
KeyTable, Jeditable, DataTable with json
Hi,
Is it possible to use KeyTable with Datatable using json and jeditable ???
I try this
[code]
$(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" },
null,
{"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"
}
}
} );
//navigation
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 );
} );
});
//export
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 );
} );
[/code]
Json and Jeditable works but KeyTable not.
Have you got any idea?
Thank,
Is it possible to use KeyTable with Datatable using json and jeditable ???
I try this
[code]
$(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" },
null,
{"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"
}
}
} );
//navigation
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 );
} );
});
//export
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 );
} );
[/code]
Json and Jeditable works but KeyTable not.
Have you got any idea?
Thank,
This discussion has been closed.
Replies
Yes, if I do the same thing without the ajaxSource it works.
But I need to load my data with ajax
Thank
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){
fnCallback(a,b,c);
keys.fnSetPosition(1,1);
}
$.ajax( {
"dataType" : 'json',
"type" : "POST",
"url" : sSource,
"data" : aoData,
"success" : fnCallback2
});
}
[/code]
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.