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>