CODEWITHSUNDEEP
javascriptjquerydatatabledatatablesdatatables-1.10
Shruti
Shruti

Reputation: 149

Datatable row count not working with search result

In the view the code is working fine and showing me the count and result. Also on search. However when I search any word I want that count according to the search result but in my case its showing me total count of the all price fields. It's not showing the current search result count. Can anyone please help me?

My Datatable code for custom search and count of last two fields: 

$(document).ready(function() {
    var table = $('#example').DataTable({
        "scrollX": true,
        "bLengthChange": false,
        dom: 'Bfrtip',
        buttons: [{
        extend: "excel",
        className: "darse"
    },{
        extend: "print",
        className: "ddf"
    }]
});

Upvotes: 1

Views: 3465

Answers (2)

Sachin Som
Sachin Som

Reputation: 1201

One way is to use page.info() API. table.page.info().recordsDisplay gives the displayed records, even if table is filtered, this gives the currenlty displayed records.

const dataTableConfig = {
   "scrollX": true,
        "bLengthChange": false,
        dom: 'Bfrtip',
        buttons: [{
        extend: "excel",
        className: "darse"
    },{
        extend: "print",
        className: "ddf"
    }]
};
const table = $(document).ready(function() {
    $('#tableId').dataTable({
        ...dataTableConfig
    });
})
console.log(table.page.info().recordsDisplay);

Log Result

enter image description here

Upvotes: 0

Shiffty
Shiffty

Reputation: 2146

Make sure to set search: 'applied' in the selector-modifier of the column method.

$('<p>' + table.column(6, {
    page: 'current',
    search: 'applied'
}).data().sum() + '</p>').prependTo('#demo');

You are also calling the sum only once after the inital draw. Move the call to sum to the drawCallback. Below is an example:

$.fn.DataTable.Api.register('column().data().sum()', function() {
  return this.reduce(function(a, b) {
    var x = parseFloat(a) || 0;
    var y = parseFloat(b) || 0;
    return x + y;
  }, 0);
});

$(document).ready(function() {
  var table = $('#example').DataTable({
    "bLengthChange": false,
    dom: 'Bfrtip',
    drawCallback: function(settings) {
      var api = this.api();
      $('<p>' + api.column(1, {
          page: 'current',
          search: 'applied'
      }).data().sum() + '</p>').prependTo('#demo');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<span id="demo" />
<table id="example">
  <thead>
    <tr>
      <th>Text</th>
      <th>Number</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Text</th>
      <th>Number</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Alpha</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Beta</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Gamma</td>
      <td>8</td>
    </tr>
    <tr>
      <td>Delta</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Related Questions