DataTables

arobase

Hi,

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" },
			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 );



} );

</script>

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

Thank,

tedkalaw

Have you made sure that the CSS is correct?

arobase

Hi,

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

Thank

cwraab

I have the same issue. My keytable does not initialize when I use ajaxSource. It does when I don't use ajaxSource. Any ideas?

cwraab

Anybody find a resolution to this?

bobbaddeley

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:

"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
				});
			}

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.

DataTables

Howdy, Stranger!

Support

Categories

In this Discussion