I am gearing up to use the JEditable plugin, but have a dilemma. Only certain columns will be editable and it will be determined server side. So I need a way to set the class of <td> that have a value of editable to 'edit' so that those fields become editable. A sample of the JSON is:
My JS thus far looks like this:
Any help is greatly appreciated!
{ "Timeline": [ { "ID": "1", "ProjectName": "Project A", "FocusArea": "Area 01", "Function": "Task 01", "ProductGroup": "Group 01", "Week1": { "value": "10", "editable": "false" }, "Week2": { "value": "20", "editable": "false" }, "Week3": { "value": "20", "editable": "false" }, "Week4": { "value": "15", "editable": "true" } } } ]
My JS thus far looks like this:
$(document).ready(function () { $('#table_id').dataTable({ 'bFilter': false, 'bLengthChange': false, 'bProcessing': true, 'bJQueryUI': true, 'sPaginationType': 'full_numbers', "sDom": 'ript', 'sAjaxSource': 'testData.json', 'sAjaxDataProp': 'Timeline', 'aoColumns': [ {'mData': 'ID', 'bVisible': false}, {'mData': 'Week1.editable'}, {'mData': 'Week2.editable', 'bVisible': false}, {'mData': 'Week3.editable', 'bVisible': false}, {'mData': 'Week4.editable'}, {'mData': 'ProjectName'}, {'mData': 'FocusArea'}, {'mData': 'Function'}, {'mData': 'ProductGroup'}, {'mData': 'Week1.value'}, {'mData': 'Week2.value'}, {'mData': 'Week3.value'}, {'mData': 'Week4.value'} ], "fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) { var calculateTotal = function(column) { var total = 0; for(var i = 0; i<aaData.length; i++) { total += aaData[i][column].value*1; } return total; }; var nCells = nRow.getElementsByTagName('th'); nCells[1].innerHTML = calculateTotal('Week1'); nCells[2].innerHTML = calculateTotal('Week2'); nCells[3].innerHTML = calculateTotal('Week3'); nCells[4].innerHTML = calculateTotal('Week4'); } }); });
Any help is greatly appreciated!