json data to be updated in three table and color will change as per data in cell

json data to be updated in three table and color will change as per data in cell

sunilsahoosunilsahoo Posts: 1Questions: 1Answers: 0

Hi I have a JSON data which will call via ajax , and the data contained value of three tables . i have to update the table as per some condition ,
as per above data if the first three character is (C2S or C2C or O2C) then accordingly respective table will be update and if the SuccessP value is less (some) 95 then the row will be red or orange .

here is the code which i am trying to call a function with table ID and data and the table is updated but the color condition is not working properly

JSON

[
{
"C2S_KPI":"KO_C2S_T",
"C2S_T_TXN":"9366",
"C2S_S_Count":"9144",
"C2S_SuccessP":"97.62"
},
{
"C2S_KPI":"RB_C2S_T",
"C2S_T_TXN":"17866",
"C2S_S_Count":"17292",
"C2S_SuccessP":"96.78"
},
{
"C2S_KPI":"AS_C2S_T",
"C2S_T_TXN":"3536",
"C2S_S_Count":"3382",
"C2S_SuccessP":"95.64"
},
{
"C2S_KPI":"NE_C2S_T",
"C2S_T_TXN":"966",
"C2S_S_Count":"914",
"C2S_SuccessP":"94.61"
},
{
"C2S_KPI":"BR_C2S_T",
"C2S_T_TXN":"2858",
"C2S_S_Count":"2670",
"C2S_SuccessP":"93.42"
},
{
"C2S_KPI":"OR_C2S_T",
"C2S_T_TXN":"2798",
"C2S_S_Count":"2700",
"C2S_SuccessP":"96.49"
},
{
"C2C_KPI":"KO_C2C_T",
"C2C_T_TXN":"60",
"C2C_S_Count":"57",
"C2C_SuccessP":"95.00"
},
{
"C2C_KPI":"RB_C2C_T",
"C2C_T_TXN":"209",
"C2C_S_Count":"199",
"C2C_SuccessP":"95.21"
},
{
"C2C_KPI":"AS_C2C_T",
"C2C_T_TXN":"41",
"C2C_S_Count":"38",
"C2C_SuccessP":"92.68"
},
{
"C2C_KPI":"NE_C2C_T",
"C2C_T_TXN":"10",
"C2C_S_Count":"9",
"C2C_SuccessP":"90.00"
},
{
"C2C_KPI":"BR_C2C_T",
"C2C_T_TXN":"93",
"C2C_S_Count":"81",
"C2C_SuccessP":"87.09"
},
{
"C2C_KPI":"OR_C2C_T",
"C2C_T_TXN":"86",
"C2C_S_Count":"85",
"C2C_SuccessP":"98.83"
},
{
"O2C_KPI":"KO_O2C_T",
"O2C_T_TXN":"2",
"O2C_S_Count":"2",
"O2C_SuccessP":"100.00"
},
{
"O2C_KPI":"RB_O2C_T",
"O2C_T_TXN":"22",
"O2C_S_Count":"22",
"O2C_SuccessP":"100.00"
},
{
"O2C_KPI":"AS_O2C_T",
"O2C_T_TXN":"4",
"O2C_S_Count":"4",
"O2C_SuccessP":"100.00"
},
{
"O2C_KPI":"NE_O2C_T",
"O2C_T_TXN":"2",
"O2C_S_Count":"2",
"O2C_SuccessP":"100.00"
},
{
"O2C_KPI":"BR_O2C_T",
"O2C_T_TXN":"3",
"O2C_S_Count":"3",
"O2C_SuccessP":"100.00"
},
{
"O2C_KPI":"OR_O2C_T",
"O2C_T_TXN":"1",
"O2C_S_Count":"1",
"O2C_SuccessP":"100.00"
}
]

,

function ltt(myjson,idname) {
 var table = $('#'+idname).DataTable();
     table.destroy();

table = $('#'+idname).DataTable();
    $.each(myjson, function(x, y) {
      var keys = Object.keys(y);
      var rrow = [];
            keys.forEach(function(key) {

                if ( key.substr(0,3) === (idname.substr(6,3))){

                    rrow.push(y[key]);
                    }

                     });

                fLen = rrow.length;
                    for (i = 0; i < fLen; i++) {
                    //console.log('post array'+rrow ); 
                    $('#'+idname).DataTable().row.add(rrow).draw();
                    }

    }   );

    // till here table is updating 



var table = $('#'+idname).DataTable( {

                                "paging":   false,
                                "info":     false,
                                "searching": false,
                                "ordering": true,
                                "bPaginate": false,
                                "scrollX": false,

                            "columns": [
                                    { "data": "KPI" },
                                    { "data": "T_TXN" },
                                    { "data": "S_Count" },
                                    { "data": "SuccessP" }
                                ],

                                "createdRow": function( row, data, index ) {
                                alert(data[3].SuccessP);
                                      if (data[3].SuccessP < 98) {
                                      alert(data[3].SuccessP);
                                        //$('td', row).css('background-color', 'Red');
                                        $(row).addClass("label-warning");
                                      }


                                }   
                            });


}

calling the function

ltt(point,'KEYKPIC2S');

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @sunilsahoo ,

    This example here from this thread may help - it's showing how to colour cells based on their values.

    Hope that helps, if not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

This discussion has been closed.