DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/rowreorder/1.0.0/css/rowReorder.dataTables.css">
<table id="example"></table>

CSS

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

JavaScript

var data = [];
for (var i=0;i<100;i++) {
  data.push({ 'str': 'value'+i, 
              'active': i % 2== 0 ? 'active' : 'inactive' 
           })
}
var table = $('#example').DataTable({
  data: data,
  displayLength: 5,
  columns: [
     { data: 'str', title: 'str' },
     { data: 'active', title: 'active' }
  ],
  dom: 'lfrt<"info"i<"#active">>p',
  drawCallback: function() {
    var active = 0;
    this.api().rows({'filter':'applied'}).every(function() {
      if (this.data().active == 'active') active++
    })
    $('#active').html(active+ ' active ...');    
  }
})