Row count matching column value using DataTable

Question

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

Abraham Uribe · Accepted Answer · 2014-08-14 16:41:33Z

1

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);
});

answered Aug 14, 2014 at 16:41

Abraham Uribe

3,1187 gold badges28 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

chimos Over a year ago

Thanks, this seems what I was looking for. However, the 'fnRowCallback' is being called twice when I load the page (see datatables.net/forums/discussion/5756/…), and it doubles the count of 'red' and 'orange' (i.e. they output 4 and 8, instead of 2 and 4, as expected). I tried putting the first function in fnInitComplete callback, instead of fnRowCallback, but I get an error in console if I put it there. How could I solve this? Thanks

chimos Over a year ago

I solved the problem I was talking about in my previous comment. I am now using the fnCreatedRow callback, instead of fnRowCallback. So, 'fnCreatedRow': function(nRow, aData, iDataIndex){ instead of 'fnRowCallback': function(nRow,aData,iDisplayIndex,iDisplayIndexFull){.

Collectives™ on Stack Overflow

Row count matching column value using DataTable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related