DataTables logo DataTables

via Ad Packs
Tracking Selectable Rows and last-updated-cell on serverside processing (using datatables-editable)
  • I'm trying to figure out to replicated the state saved selectable rows and last updated cell. However I don't know how to create it, and also it is not present in the example packages! For example on this page: http://jquery-datatables-editable.googlecode.com/svn/trunk/inline-edit-extra.html after you update one of the inline cells, the when it redraws the table, it stays on the edited cell.

    I've got all the lastest versions of datatables and datatables-editable and jquery editable. Can anyone help?

    Here's the code I have right now.

    <script>
    	var asInitVals = new Array();
    	var oTable;
    	
    	/* Formating function for row details */
    	function fnFormatDetails ( nTr ){
    		var aData = oTable.fnGetData( nTr );
    		var sOut = '<table class="row_profile">';
    		sOut += '<tr><th>Personal Details</th><th>Internship Details</th></tr>';
    		sOut += '<tr><td><ul><li><strong>Name:</strong> '+aData['name']+'</li><li><strong>Email:</strong> <a href="mailto:'+aData['email']+'?subject=AIESEC ANU Internship Application #'+aData['id']+' - '+aData['name']+'">'+aData['email']+'</a></li><li><strong>Phone:</strong> <a href="tel:'+aData['phone']+'">'+aData['phone']+'</a></li><li><strong>University:</strong> '+aData['university']+'</li><li><strong>Course:</strong> '+aData['course']+'</li><li><strong>Year of Graduation:</strong> '+aData['year_of_graduation']+'</li><li><strong>Part of LC:</strong> '+aData['part_of_lc']+'</li></ul></td>';
    		sOut += '<td><ul><li><strong>ID:</strong> '+aData['id']+'</li><li><strong>Status:</strong> '+aData['status']+'</li><li><strong>Date of Entry:</strong> '+aData['date_of_entry']+'</li><li><strong>Preferred Internship:</strong> '+aData['internship']+' (MT:'+aData['mt']+' TT:'+aData['tt']+' DT:'+aData['dt']+' ET:'+aData['et']+')</li><li><strong>Preferred Departure:</strong> '+aData['preferred_departure']+'</li><li><strong>Preferred Duration (in months):</strong> '+aData['preferred_duration']+'</li><li><strong>Date of Departure:</strong> '+aData['date_of_departure']+'</li><li><strong>Date of Return:</strong> '+aData['date_of_return']+'</li><li><strong>Review Financial Contract:</strong> '+aData['review_fin_contract']+'</li><li><strong>Inducted into LC:</strong> '+aData['inducted']+'</li></ul></td></tr>';
    		sOut += '<tr><td colspan="2"><h4>Notes</h4><em>NOGO means countries the EP is not willing to go to. | GO means the countries the EP is interested in. | FINCOM means the EP\'s financial commitments. | WHY means why the EP chose AIESEC. | GOALS means the EP\'s short term goals.</em><p>'+aData['notes']+'</p></td></tr>';
    		sOut += '</table>';
    		return sOut;
    	}
    	
    	$(document).ready(function(){
    	
    		oTable = $('#ogx_app_table').dataTable({
    			"bProcessing" : true,
    			"bServerSide" : true,
    			"sPaginationType": "full_numbers",
    			"bStateSave": true,
    			"aaSorting": [[5,'desc']],
    			"bAutoWidth": false,
    			"iDisplayLength": 10,
    			"aLengthMenu": [[10, 50, 100, -1], [10, 50, 100 ,"All"]],
    			"sAjaxSource": "<?php bloginfo('template_directory'); ?>/ogx_app_datatables.php",
    			"aoColumns": [
    				{ "mDataProp": 'details_trigger', "bSortable": false, "sClass": "detail_td", "bSearchable": false, },
    				{ "mDataProp": 'id' },
    				{ "mDataProp": 'status' },
    				{ "mDataProp": 'name' },
    				{ "mDataProp": 'internship' },
    				{ "mDataProp": 'date_of_entry' },
    				{ "mDataProp": 'date_of_departure' },
    				{ "mDataProp": 'date_of_return' },
    			],
    			"oLanguage": {
    				"sSearch": "Search all columns:"
    			}
    		}).makeEditable({
    			sUpdateURL: "<?php bloginfo('template_directory'); ?>/ogx_app_datatables.php",
    			"aoColumns": [
    				null,
    				null,
    				{
    					tooltip: 'Click to update status!',
    					loadtext: 'loading...',
    					type: 'select',
    					onblur: 'cancel',
    					submit: 'Submit',
    					data: "{'open':'Open','taken':'Taken','interview':'Interview','mrb':'MRB','pdd':'PDD','predeparture':'PreDeparture','interning':'Interning','returned':'Returned','terminate':'Terminate','inducted':'Inducted','rejected':'Rejected','priority':'PRIORITY','delete':'Delete'}",
    				},
    				null,
    				null,
    				null,
    				null,
    				null,
    			],
    			fnShowError: false,
    		}).columnFilter({
    			aoColumns: [
    				null,
    				{ type: "number" },
    				{ type: "select", values: [ 'Open', 'Taken', 'Interview', 'MRB', 'PDD', 'PreDeparture', 'Interning', 'Returned', 'Terminate', 'Inducted', 'Rejected', 'PRIORITY', 'Delete']  },
    				{ type: "text" },
    				{ type: "text" },
    				{ type: "text" },
    				{ type: "text" },
    				{ type: "text" },
    				{ type: "text" },
    			],
    		});
    		
    
    		
    		$('#ogx_app_table tbody td img').live( 'click', function () {
    			var nTr = $(this).parents('tr')[0];
    			if ( oTable.fnIsOpen(nTr) )
    			{
    				/* This row is already open - close it */
    				this.src = "<?php bloginfo('template_directory'); ?>/images/details_open.png";
    				oTable.fnClose( nTr );
    			}
    			else
    			{
    				/* Open this row */
    				this.src = "<?php bloginfo('template_directory'); ?>/images/details_close.png";
    				oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
    			}
    		} );
    		
    	}); 
    </script> 
    
    

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Support

Get useful and friendly help straight from the source.