根据列值和数据表中的下拉列表计算行数

Question

我试图计算基于下拉列表的行数和列（状态）的值。例如，如果我在下拉列表中选择“会计”，我想获得

total rows: 6
state valus 1: 1 rows
state valus 2: 3 rows
state valus 3: 1 rows
state valus 4: 1 rows

$(document).ready(function() $('#example').DataTable({
  "scrollY": "200px",
  "paging": false,
  initComplete: function() {
    this.api().columns(1).every(function() {
      var column = this;
      var select = $('<select class="Search"><option value=""></option></select>')
        .appendTo($(column.header()))
        .on('change', function() {
          var val = $.fn.dataTable.util.escapeRegex($(this).val());
          column.search(val ? '^' + val + '$' : '', true, false).draw();
        });
      column.data().unique().sort().each(function(d, j) {
        select.append('<option value="' + d + '">' + d + '</option>')
      });
    });
  }
});

// this one return the taotal number filtring
$('.Search').change(function() {
  function getNumFilteredRows(id) {
    var info = $(id).DataTable().page.info();
    return info.recordsDisplay;
  }
  $('#total').empty();
  $('#total').append(getNumFilteredRows("#example"));
});

$('.search').change(function() {
  var i;
  for (i = 1; i < 5; i++) {
    var count = $('#example').DataTable()
      .column(2) // column state
      .data()
      .filter(function(value, index) {
        return value == i ? true : false;
      }).length;
    $('#index' + i).empty();
    $('#index' + i).append('' + count);
  }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.11/jquery.min.js"></script>
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th id="total"></th>
    </tr>
    <tr>
      <th id="index1"></th>
    </tr>
    <tr>
      <th id="index2"></th>
    </tr>
    <tr>
      <th id="index3"></th>
    </tr>
    <tr>
      <th id="index4"></th>
    </tr>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>state</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>infography</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Tiger Nixon</td>
      <td>System dev</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>1</td>
    </tr>
  </tbody>
</table>