Data Table code not working with client data loaded from a server. Please Help.

shafeerambatt

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>