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 !
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>