jquery-datatable: incorrect "Showing <range> of <total> entries" message is displayed
<p>I am working on developing an ASP.NET web page where data will be displayed in a jquery Datatable. I am able to display the data but, <strong>the issue I am facing is, the information "Showing  of  entries" is displaying an incorrect value.</strong></p>

<p><strong>Fiddler:</strong> <a href="https://jsfiddle.net/8f63kmeo/9/" rel="nofollow noreferrer">https://jsfiddle.net/8f63kmeo/9/</a></p>

<p><strong>HTML:</strong></p>

<pre><code>    &lt;table id="CustomFilterOnTop" class="display nowrap" width="100%"&gt;&lt;/table&gt;  
</code></pre>

<p><strong>JS</strong></p>

<pre><code>var Report4Component = (function () {
    function Report4Component() {
        //contorls
        this.customFilterOnTopControl = "CustomFilterOnTop"; //table id
        //data table object
        this.customFilterOnTopGrid = null;
        //variables
        this.result = null;
    }
    Report4Component.prototype.ShowGrid = function () {
        var instance = this;
        //add footer
        $('#' + instance.customFilterOnTopControl)
            .append('&lt;tfoot&gt;&lt;tr&gt;&lt;th colspan="2" class="total-text"&gt;Total&lt;/th&gt;&lt;th class="total-value"&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/tfoot&gt;');
        //create the datatable object
        instance.customFilterOnTopGrid = $('#' + instance.customFilterOnTopControl).DataTable({
            columns: [
                { data: "Description", title: "Desc" },
                { data: "Status", title: "Status" },
                { data: "Count", title: "Count" }
            ],
            "paging": true,
            scrollCollapse: true,
            "scrollX": true,
            scrollY: "300px",
            deferRender: true,
            scroller: true,
            dom: '&lt;"top"Bf&lt;"clear"&gt;&gt;rt &lt;"bottom"&lt;"Notes"&gt;i&lt;"clear"&gt;&gt;',
            buttons: [
                {
                    text: 'Load All',
                    action: function (e, dt, node, config) {
                        instance.ShowData(10000);
                    }
                }
            ],
            initComplete: function (settings) {
                var api = this.api(settings);
                //now, add a second row in header which will hold controls for filtering. 
                $(api.table().header()).append('&lt;tr role="row" id="FilterRow"&gt;' +
                    '&lt;th&gt;Desc&lt;/th&gt;' +
                    '&lt;th&gt;Status&lt;/th&gt;' +
                    '&lt;th&gt;Count&lt;/th&gt;' +
                    '&lt;/tr&gt;');
                //add input controls for filtering
                $('#FilterRow th', api.table().header()).each(function () {
                    var title = $('#' + instance.customFilterOnTopControl + ' thead th').eq($(this).index()).text();
                    $(this).html('&lt;input type="text" onclick="return false" placeholder="Search ' + title + '" class="form-control" /&gt;');
                });
                //todo: refactor this code. this is for displaying the scrollbar below the tfoot instead of tbody
                //when multiple tables are present, use tablename.find to get the specific class object
                //this code is not tested with other options
                $('.dataTables_scrollBody').css({
                    'overflow-x': 'hidden',
                    'border': '0'
                });
                $('.dataTables_scrollFoot').css('overflow', 'auto');
                $('.dataTables_scrollFoot').on('scroll', function () {
                    $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
                });
            },
            footerCallback: function (tfoot, data, start, end, display) {
                var api = this.api();
                if (instance.result == null || instance.result.Total == undefined) {
                    return;
                }
                $(api.column(2).footer()).html(instance.result.Total);
            }
        });
        $("div.Notes").html('&lt;div class="alert alert-warning"&gt;This is a notes section part of the table dom.&lt;/div&gt;');
    };
    Report4Component.prototype.BindEvents = function () {
        var instance = this;
        $("#FilterRow th input").on('keyup change', function () {
            instance.customFilterOnTopGrid
                .column($(this).parent().index() + ':visible')
                .search("^" + $(this).val(), true, false, true) //uses regular expression and checks only for starts with
                .draw();
        });
    };
    Report4Component.prototype.ShowData = function (limit) {
        if (limit === void 0) { limit = 100; }
        var instance = this;
        instance.customFilterOnTopGrid.clear(); //latest api function
        instance.result = instance.GetData(limit);
        instance.customFilterOnTopGrid.rows.add(instance.result.RecordList);
        instance.customFilterOnTopGrid.draw();
    };
    Report4Component.prototype.GetData = function (limit) {
        //structure of the response from controller method
        var resultObj = {};
        resultObj.Total = 0;
        resultObj.RecordList = [];
        for (var i = 1; i &lt;= limit; i++) {
            resultObj.Total += i;
            var record = {};
            record.Description = "This is a test description of record " + i;
            record.Status = ["A", "B", "C", "D"][Math.floor(Math.random() * 4)] + 'name text ' + i;
            record.Count = i;
            resultObj.RecordList.push(record);
        }
        return resultObj;
    };
    return Report4Component;
}());
$(function () {
    var report4Component = new Report4Component();
    report4Component.ShowGrid();
    report4Component.BindEvents();
    report4Component.ShowData();
});
function StopPropagation(evt) {
    if (evt.stopPropagation !== undefined) {
        evt.stopPropagation();
    }
    else {
        evt.cancelBubble = true;
    }
}
</code></pre>

<p><strong>Issue:</strong></p>

<p>In the snapshot below, you can see that there are 8 records displayed in the grid but, the count is showing as 1 to 1 of 100. It should be 1 to 8 of 100.</p>

<p><a href="https://i.stack.imgur.com/rSiEn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rSiEn.png" alt="enter image description here"></a></p>

<p><strong>Observation:</strong></p>

<p>If you resize the page, the counts seems to appear correctly. I don't want to trigger window resize event after every draw. Is there any api available to handle this issue?</p>

<p><strong>Expectation:</strong></p>

<p>How should I fix this issue? Any suggestion is appreciated.</p>