title: jquery-datatable: incorrect "Showing <range> of <total> entries" message is displayed
body: <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>