Edit jQuery dataTables info

Question

I am using Jquery Data table to present my table. I have a column which has record as Active or Inactive. Now I want to display count of number of column which has value active & inactive right after where it shows Showing 1 to 10 of 72 entries.

My table like like this

Jquery

<script type="text/javascript">
        $(document).ready(function () {
            $('#example').dataTable({
                "bLengthChange": true,
                "paging": true,
                "sPaginationType": "full_numbers" ,                    //For Different Paging  Style
                "scrollY": 400,                                     // For Scrolling
                "jQueryUI": false,                                     //Enabling JQuery UI(User InterFace)
                "lengthMenu": [[30, 50, 100, -1], [30, 25, 50, "All"]],
                drawCallback: function (settings) {
                    var api = this.api(); 
                    // get the number of rows, but remove the page:current if you want number of rows in entire dataset
                    var count = api.rows({
                        api: $('#example tbody tr td[value="active"]')
                    }).data().length;
                    // this takes the count and appends it in a span tag to the dataTables pageinate div element
                    $('<span id="active_rows"></span>').html(count + ' rows').appendTo($('.dataTables_info'));
                }
            });
        });
    </script>

Answer 1

I would add an unique #active element to .dataTables_info :

dom: 'lfrt<"info"i<"#active">>p',

Then use drawCallback like this

drawCallback: function() {
  var active = 0;
  this.api().rows({'filter':'applied'}).every(function() {
    if (this.data().active == 'active') active++
  })
  $('#active').html(active+ ' active ...');    
}

demo -> http://jsfiddle.net/3dmpwokd/

Note: If you are using a DOM-based table, evaluate with for example this.data()[2] instead of this.data().active.

I have added this CSS, I dont know how you want to present info

.dataTables_info {
  float: left !important;
  clear: none !important;
}
#active {
  display: inline-block;
  margin: 12px;
}

Answer 2

Take a look at the events and use the one that gets fired after draw. Then you can call jQuery to override the text in the info element.

Specifically, the drawCallBack will get the results in the table, you can filter them as you would like then get the count. after, just append a span or some tag to the .dataTables_paginate element. Hope it helps a little.

var table = $('#notifications')
    .DataTable({
        drawCallback: function (settings) {
        //gets the table api instance    
        var api = this.api(); 

       // get the number of rows, but remove the page:current if you want number of rows in entire dataset
        var count = api.rows({ page: 'current' }).data().length; 

        // this takes the count and appends it in a span tag to the dataTables pageinate div element
        $('<span></span>').html(count + ' rows').appendTo($('.dataTables_paginate'));
        }
    });