Chelseawillrecover
Chelseawillrecover

Reputation: 2644

Row count matching column value using DataTable

I would like to count number of rows whose value in a particular column matches. See Code below:

<script type="text/javascript" charset="utf-8">

    $(document).ready(function() {

        var refreshAlertTable = $('#alert-table').dataTable( {
            "bInfo": false,
            "sAjaxSource": 'ajax/alert_json.xml',
            "bServerSide": true,
            "bJQueryUI": true,
            "bLengthChange": false,
            "bPaginate": false,
            "bFilter": false,
            "aaSorting" : [[2, "desc"]],
            "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                if ( aData[2] == "5" )
                {
                    $('td', nRow).css('background-color', 'Red');
console.log(aData.length);
                }
                else if ( aData[2] == "4" )
                {
                    $('td', nRow).css('background-color', 'Orange');
console.log(aData.length);
                }
            },
        });

        setInterval (function() {
            refreshAlertTable.fnDraw();
        }, 5000);
    } );
</script>

The first console log shows 3 circled and 5 but the actual count for that match is 3. The second console log shows 2 circled and 5 but the result should be 2. How can I retrieve just the circled values

Upvotes: 1

Views: 1974

Answers (1)

Abraham Uribe
Abraham Uribe

Reputation: 3118

the aData inside fnRowCallback is an Array with the contents of the actual row so aData.length is equal to the number of columns you have in the table

to get the number of colored rows you may use two vars and increase them in fnRowCallback then display the number of rows in fnDrawCallback and reset the values to zero like this

$(document).ready(function() {
    var red=0;//number of red rows
    var orange=0;//number of orange rows
    var refreshAlertTable = $('#alert-table').dataTable( {
        "bInfo": false,
        "sAjaxSource": 'ajax/alert_json.xml',
        "bServerSide": true,
        "bJQueryUI": true,
        "bLengthChange": false,
        "bPaginate": false,
        "bFilter": false,
        "aaSorting" : [[2, "desc"]],
        "fnRowCallback": function(nRow,aData,iDisplayIndex,iDisplayIndexFull){
            if ( aData[2] == "5" )
            {
                $('td', nRow).css('background-color', 'Red');
                red++;//if the row is red increment the value
            }
            else if ( aData[2] == "4" )
            {
                $('td', nRow).css('background-color', 'Orange');
                orange++;//if the row is orange increase the value
            }
        },
        "fnDrawCallback":function(oSettings){
        //fnDrawCallback executes after all the fnrowcallbacks
             console.log("red "+red);//show the number of red rows
             console.log("orange "+orange); //show the number of orange rows
             red=0;//reset the values to 0 for the setInterval
             orange=0;
        }
    });
    setInterval (function() {
        refreshAlertTable.fnDraw();
    }, 5000);
});

Upvotes: 1

Related Questions