Quantcast
Channel: DataTables 1.9 — DataTables forums
Viewing all articles
Browse latest Browse all 1816

Adding button using fnRender and getting oObj.aData[0] bugs

$
0
0
Hi,

I'm having a hard time figuring out where is the bug in the code below :

I have a table and i add in the first column a button, as well as in the last two columns. However, it seems that the oObj.aData[1] varies with time, which is totally beyond understanding.

As you can see in the code, the first column i process uses oObj.aData[0] in the fnRender function, and oObj.aData[0] corresponds to the id from the data.

Further, i process another column, but i can't reach the id from the data : oObj.aData[0] corresponds now to the code of the button of the first column i've processed, while oObj.aData[1] corresponds to the field "day" of the data, and not "id"...

Here are the debug links : http://debug.datatables.net/eyefah

Thanks in advance for you help !


<table cellpadding='0' cellspacing='0' border='0' class='table table-striped table-bordered table-condensed' id='datatableDay1' style="margin-top:-15%">
     <thead>
				<tr>
					<th>Select</th>
					<th>Id</th>
					<th>Day</th>
					<th>Begin</th>
					<th>AM/PM</th>
					<th>End</th>
					<th>AM/PM</th>
					<th>Title</th>
					<th>Details</th>
					<th>isNow</th>
					<th>Edit</th>
					<th>Delete</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
<script>

$(function() {
	var oTable;
	var editor;
	f();	
	$.extend( $.fn.dataTableExt.oStdClasses, {
		'sWrapper': 'dataTables_wrapper form-inline'
	});
	// Set the classes that TableTools uses to something suitable for Bootstrap
	$.extend( true, $.fn.DataTable.TableTools.classes, {
		'container': 'btn-group',
		'buttons': {
			'normal': 'btn',
			'disabled': 'disabled'
		},
		'collection': {
			'container': 'DTTT_dropdown dropdown-menu',
			'buttons': {
				'normal': '',
				'disabled': 'disabled'
			}
		}
	} );
	
	// Have the collection use a bootstrap compatible dropdown
	$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
		'collection': {
			'container': 'ul',
			'button': 'li',
			'liner': 'a'
		}
	});
});

var aj = function getSchedulesConfig(day){
		$.ajax({
			url: 'pages/administration/getSchedulesConfigJSON.php',
			type: 'POST',
			data: {value: day},
			dataType:'json',
			success: function(data){
				idTable = '';
				oTable = $('#datatableDay1').dataTable({
					//'sDom': '<\'row-fluid\'<\'span6\'l><\'span6\'fT>r>t<\'row-fluid\'<\'span6\'i><\'span6\'p>>',
					'fnCreatedRow': function( nRow, aData, iDataIndex ) {
						if(aData[8] == 1){
							$('td', nRow).css('background-color', '#dff0d8');
						} else {
							$('td', nRow).css('background-color', '#fcf8e3');
						}
					},
					"aaSorting": [[ 1, "asc" ]],
					"aoColumns": [
							{
				               "mDataProp": null,
				               "sClass": "selecting",
				               "bSortable" : false,
				               "sDefaultContent": '<div class=text-center><button class="btn btn-mini btn-success" type="button"><i class="icon-check icon-white"</i></button></div>',
				               fnRender: select
				            },
				            { "mDataProp": "id", "bVisible": true, "bSearchable": false },
				            { "mDataProp": "day", "bVisible": true, "bSearchable": false },
				            { "mDataProp": "begin", "bSortable" : false},
				            { "mDataProp": "beginAM", "bSortable" : false },
				            { "mDataProp": "end", "bSortable" : false },
				            { "mDataProp": "endAM", "bSortable" : false },
				            { "mDataProp": "title", "bSortable" : false },
				            { "mDataProp": "details", "bVisible": false, "bSearchable": false },
				            { "mDataProp": "isNow", "bVisible": false, "bSearchable": false },
				            {
				               "mDataProp": null,
				               "sClass": "modifying",
				               "bSortable" : false,
				               "sDefaultContent": '',
				               fnRender: modif
				            },
				            {
				               "mDataProp": null,
				               "sClass": "deleting",
				               "bSortable" : false,
				               "sDefaultContent": '',
				               fnRender: delet
				            },
				        ],
					'oTableTools': {
						/*'sRowSelect': 'single',
						'aButtons': [
						'copy',
						'csv',
						'xls',
						{
							'sExtends': 'pdf',	
							'sTitle': 'LSM Cup 2014 : Schedules Case 1',
							'sPdfOrientation': 'landscape',
							'sFileName': 'Schedules Case 1 - LSM Cup 2014'
						},
						'print'
						],*/
						'sSwfPath': 'datatable/copy_csv_xls_pdf.swf'
					},
					'sPaginationType': 'bootstrap',
					'bProcessing': true,
					'bPaginate': false,
					'bFilter': false,
					'bDestroy': true,
					'bStateSave' : true,
					'aaData': data
				});		
				},
			error: function(data){
				alert('Ajax Failure');
			}
		});
	};
	var f = function reload(){
		aj(1);
	};


function now(id){
	$.ajax({
		url: 'pages/administration/schedulesSelect.php',
		type: 'POST',
		data: {value: id, type: 'modify'},
		success: f,
		error : function(data){
			alert('Please try again : ajax failure');
		},
	});
}

function unNow(id){
	$.ajax({
		url: 'pages/administration/schedulesSelect.php',
		type: 'POST',
		data: {value: id, type: 'remove'},
		success: f,
		error : function(data){
			alert('Please try again : ajax failure');
		},
	});
}
function popup_modifSchedule(id){
	$('#myModal').on('shown', function () {
    	$('#toFocus').focus();
    	$('#toFocus').blur();
	});
	
	$('#myModal').removeData('modal').modal({
		remote: "pages/administration/popupSchedulesModify.php?s="+id
	});

}

function updat(id){
	alert(id);
	popup_modifSchedule(id);
}

function deleteFromDb(id){
	$.ajax({
		url: 'pages/administration/schedulesSelect.php',
		type: 'POST',
		data: {value: id, type: 'delete'},
		success: f,
		error : function(data){
			alert('Please try again : ajax failure');
		},
	});
}

function select(oObj){  
        // I'm relying on id being in column 0, but I could just as well used
        //  oObj.aData[oObj.iDataColumn]; // since this column also has the ID value
     var id = oObj.aData[0];
     var isNow = oObj.aData[8];
     if(isNow == 1){
     	return "<a onclick='unNow("+id+")' class='selecting' style='cursor: pointer;'><div class=text-center><i class='icon-remove'></i></div</a>";;
     } else {
     	return "<a onclick='now("+id+")' class='selecting' style='cursor: pointer;'><div class=text-center><i class='icon-check'></i></div</a>";
     }
     
}

function modif(oObj){  
        // I'm relying on id being in column 0, but I could just as well used
        //  oObj.aData[oObj.iDataColumn]; // since this column also has the ID value
     var id = oObj.aData[0];

     return "<a onclick='updat("+id+")' class='modifying' style='cursor: pointer;'><div class=text-center><i class='icon-pencil'></i></div</a>";
}

function delet(oObj){  
        // I'm relying on id being in column 0, but I could just as well used
        //  oObj.aData[oObj.iDataColumn]; // since this column also has the ID value
     var id = oObj.aData[1];

     return "<a onclick='deleteFromDb("+id+")' class='deleting' style='cursor: pointer;'><div class=text-center><i class='icon-trash'></i></div</a>";

</script>

Viewing all articles
Browse latest Browse all 1816

Trending Articles