I tried to use dataTable code in my page. Table data is loaded from a server when I input a range of dates and click 'Get Details'. And I think because of this the search function is not working.All search fileds are present but none of them working the message 'No data available in the table.' How do i fix it.? See the code below.
<style type="text/css">
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
</style>
<table id="example" class="display" cellspacing="0" width="100%" border="1">
<thead>
<tr>
<th>Sl.No</th>
<th>Order Id</th>
<th>Product</th>
<th>City</th>
<th>Mobile</th>
<th>Order Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Sl.No</th>
<th>Order Id</th>
<th>Product</th>
<th>City</th>
<th>Mobile</th>
<th>Order Date</th>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="order in allOrders">
<td>{{$index + 1}}</td>
<td>{{order._source.orderid}}</td>
<td>{{order._source.product}}</td>
<td>{{order._source.city}}</td>
<td>{{order._source.mobile}}</td>
<td>{{order._source.order_date}}</td>
</tr>
</tbody>
</table></br></br>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable();
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
</script>
