Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82115

Adding classes based on JSON value

$
0
0
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:

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

Viewing all articles
Browse latest Browse all 82115

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>