table header is not adjusting first time but adjusting after changing the page size by dragging the

bharathmuppa

my page is responsive one so i need my datatables to adjust to screen size

my header contains js files..

          ```   <script src="./cordova.js"></script>
       <script src="./js/vendor/jquery-1.10.0.min.js"></script>
       <script src="./js/vendor/jquery.mobile-1.3.1.min.js"></script>
       <script src="./js/vendor/underscore.js"></script>
           <script src="./js/vendor/less.min.js"></script>
       <script src="./js/vendor/Bootdatepicker.js"></script>
       <script src="./js/datatable_new.js"></script>
       <script src="./js/events.js"></script>
       <script src="./js/util.js"></script>
       <script src="./js/template.js"></script>
       <script src="./js/function.js"></script> '''

on login i will get a response from server, which i dynamically added to one division name "myId" by calling a function.function code looks like ..

```

 var tHead, tBody;  
 tHead = "<thead><tr>";
 tBody = "<tbody>";
 for (var i = 0; i < Object.keys(data[0]).length; i++) {
 tHead = tHead + "<td>" + Object.keys(data[0])[i] + "</td>";
 }
 for (var i = 0; i < data.length; i++) {
 tBody = tBody + "<tr>";
 for (var j = 0; j < Object.keys(data[i]).length; j++) {
 tBody = tBody + "<td>" + data[i][Object.keys(data[i])[j]] + "</td>";
 }
 }
 tHead = tHead + "</tr></thead>";
 tBody = tBody + "</tr></tbody>";
 console.log(tHead + tBody);
 $(id).html(tHead + tBody);
 var table = $(id).dataTable({
     "scrollY": "200px",
     "scrollCollapse": true,
     "paging": false,
     "bFilter": true
 });
 $(id).on('keyup', '.ui-input-text', function() {
     table.search(this.value).draw();
 });
 //$('.dataTable').wrap('<div class="dataTables_scroll" />');

```
even search bar functionality which is on top of table by default is also not working.

Please help me out as it is my project requirement.