I am trying to have a dropdown (select) default to the value being returned from the Ajax on the server.
My code is:
oTable = $('#myDataTable').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "OCPWebService.asmx/GetData", //PHP Source
"bJQueryUI": true,
"bAutoWidth": false,
"bInfo": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bSort": true,
"bStateSave": true,
"sDom": '<"add_delete_toolbar">frtip', //creates the toolbar for adding and deleting records
//"aLengthMenu": [[-1, 10, 25, 50, 100], ["All", 10, 25, 50, 100]], //this sets up the value/name pair in the number of records dropdown.
"aoColumnDefs": [
{ "sWidth": "0%", "bSearchable": true, "bVisible": false, "aTargets": [0] },
{ "sWidth": "5%", "bSearchable": true, "sTitle": "PDD", "aTargets": [1] },
{ "sWidth": "5%", "bSearchable": true, "sTitle": "Office", "aTargets": [2] },
{ "sWidth": "5%", "bSearchable": true, "sTitle": "Division", "aTargets": [3] },
{ "sWidth": "5%", "bSearchable": true, "sTitle": "Branch", "aTargets": [4] },
{ "sWidth": "5%", "bSearchable": true, "sTitle": "Department", "aTargets": [5] },
{ "sWidth": "20%", "bSearchable": true, "sTitle": "Department Name", "aTargets": [6] },
{ "sWidth": "7%", "bSearchable": true, "sTitle": "PDD", "aTargets": [7] },
{ "sWidth": "8%", "bSearchable": true, "sTitle": "Office", "aTargets": [8] },
{ "sWidth": "8%", "bSearchable": true, "sTitle": "Division", "aTargets": [9] },
{ "sWidth": "8%", "bSearchable": true, "sTitle": "Branch", "aTargets": [10] },
{ "sWidth": "8%", "bSearchable": true, "sTitle": "Department", "aTargets": [11] },
{ "sWidth": "20%", "bSearchable": true, "sTitle": "Department Name", "aTargets": [12] },
//{ "sWidth": "5%", "bSearchable": true, "sTitle": "Action", "aTargets": [13] },
{ fnRender: function (oObj) { return '<select id="ACTION" >' + '<option selected value="N/A"></option>' + '<option value="CHANGE">CHANGE</option>' + '<option value="DELETE">DELETE</option>' + '</select> '; }, "aTargets": [13] },
{ "sWidth": "5%", "bSearchable": true, "sTitle": "By", "aTargets": [14] },
{ "sWidth": "5%", "bSearchable": true, "sTitle": "On", "aTargets": [15] }
],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
/*
This function allows you to 'post process' each row after it have been generated for each table draw,
but before it is rendered on screen. This function might be used for setting the row class name etc.
*/
//add the ID field of the record to the TR elements id attribute
$(nRow).attr("id", aData[0]);
//add the mouseover and mouseout events
$(nRow).mouseover(function () {
$(this).bind('mouseenter', function () { $(this).addClass('datahighlight'); });
})
.mouseout(function () {
$(this).bind('mouseleave', function () { $(this).removeClass('datahighlight'); });
});
$(nRow).children().each(function (index, td) {
//add the class 'edit' to the NEW columns so that jEdit can be used
if (index == 12) {
//add the id attrib of red
$(this).addClass('edit_select');
}
});
},
"fnDrawCall": function(oSettings){
$('.edit_select').editable("OCPWebService.asmx/UpdateData", {
indicator : '<img src="img/indicator.gif">',
data : "{'Lorem ipsum':'Lorem ipsum','Ipsum dolor':'Ipsum dolor','Dolor sit':'Dolor sit'}",
type : "select",
submit : "OK",
style : "inherit",
submitdata : function() {
return {id : 2};
}
});
},
"fnServerData": function (sSource, aoData, fnCallback) {
LoadData(sSource, aoData, fnCallback);
}
}); //end of table definition
$(window).bind('resize', function () {
oTable.fnAdjustColumnSizing();
});
I would like column 13 to show the SELECT and have the default value equal to the value being returned.
Any help is greatly appreciated.