JSFiddle - React, Tailwind, and code Playground

by survivant

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<table id="example" width="100%">
                <thead>
                <tr class="">
                    <th>Date</th>
                    <th>eBts</th>
                    <th>eCmts</th>
                </tr>
                </thead>
                <tbody id="0">
                <tr>
                    <td class="details-control">2016-04-28</td>
                    <td>0</td>
                    <td>0</td>
                  </tr>
                  <tr>
                    <td>2016-04-28</td>
                    <td>2</td>
                    <td>2</td>
                  </tr>
                  <tr>
                    <td class="details-control">2016-04-29</td>
                    <td>3</td>
                    <td>3</td>
                  </tr>
                  <tr>
                    <td>2016-04-29</td>
                    <td>3</td>
                    <td>3</td>
                  </tr>
                  <tr>
                    <td>2016-04-29</td>
                    <td>3</td>
                    <td>3</td>
                  </tr>
                  <tr>
                    <td>2016-04-29</td>
                    <td>3</td>
                    <td>3</td>
                  </tr>
                  <tr>
                    <td>2016-04-29</td>
                    <td>3</td>
                    <td>3</td>
                  </tr>
                  <tr>
                    <td>2016-04-29</td>
                    <td>3</td>
                    <td>3</td>
                  </tr>
                  <tr>
                    <td>2016-04-29</td>
                    <td>3</td>
                    <td>3</td>
                  </tr>
                  <tr>
                    <td>2016-04-29</td>
     ...

CSS

@import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
 td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
tbody tr {
    display : none;
}
tr.parent {
    display : table-row;
}
tr.open {
    display : table-row;
}

JavaScript

var table;
$(document).ready(function() {
    table= $('#example').dataTable({
    /*
    "fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
    console.log("oSettings=" + oSettings + "  iStart=" + iStart + "   iEnd=" + iEnd + "  iMax=" + iMax + "  iTotal=" + iTotal + "   sPre=" + sPre);
    return iStart +" to "+ iEnd;
  },
  */
    "drawCallback": function (settings) {
                var api = this.api();
                var rows = api.rows().nodes();
                var last = null;

                api.column(0).data().each(function (group, i) {
                	var row = $(rows).eq(i);
										//console.log('group=' + group + "   i=" + i + "   row=" + row.html() + "  last="+ last);
                        if (last !== group || last==null) {
                          $(row).addClass('parent');
                        } 
                     last = group;
                });
            }
    });

} );

$.fn.dataTable.ext.search.push(function (oSettings, aData, iDataIndex) {

		var api = $('#example').dataTable().api();
var rows = api.rows().nodes();
console.log(api.row(iDataIndex).node());
console.log($(rows).eq(iDataIndex).html());

		var nTr = oSettings.aoData[ iDataIndex ].nTr;
		
		var tr = $(nTr);
		
		//alert($(nTr).html());
		
    	//console.log("" + $(nTr).html());
      if (tr.hasClass('parent')) {
          return false;
      }
      else {
          return true;
      }
});



$("#example").on("click","tr",function(e) {
    e.preventDefault();
    var tr = $(this).closest("tr");
    
    if (tr.hasClass('shown') ) {
        // This row is already open - close it
        tr.removeClass('shown');
    }
    else {
        // Open this row (the format() function would return the data to be shown)
        tr.addClass('shown');
    }
    
    //alert(table.fnIsOpen(tr));
    
    tr.nextUntil(".parent").toggleClass("open");
    //alert(table.$('tr', {"filter":"applied"}).length);
    //console.log("rows count = " +...