jquery data table

 Datetable allignment  
 --------------------  
 step1   
 -------  
 <div>  
     <fieldset style="width: 97%">  
       <div class="col-md-12">  
         <div id="BOMTableView" role="widget" class="BillOfMaterialView" style="height: 250px;  
           width: 100%">  
         </div>  
       </div>  
     </fieldset>  
 </div>  
 step 2  
 ------- in css  
 #BOMTableView #BoMTable_wrapper .dataTables_scrollHead .dataTables_scrollHeadInner  
 {  
   width: 100% !important;  
 }  
 #BOMTableView #BoMTable_wrapper .dataTables_scrollHead .dataTables_scrollHeadInner .dataTable  
 {  
   width: 100% !important;  
 }  
 #BOMTableView .dataTables_scrollBody #BoMTable  
 {  
   width: 100% !important;  
 }  
 step 3  
 --------  
 if you want call in function.  
   $('#BOMTableView').append('<table id="BoMTable" style="border: 1px solid;"></table>');  
   $('#BoMTable').append('<thead id="BoMthead" style="font-weight:Bold; background-color :Gray;color:White; "></thead>');  
   // $('#BoMTable').append('<tbody id="BoMtbody"></tbody>');  
   $('#BoMthead').append(' <tr><td style=" display:none; " >Item ID</td>' +  
                '<td nowrap>SlNO</td>' +  
                '<td nowrap>Item Code</td>' +  
                '<td nowrap>Item Name</td>' +  
                '<td nowrap>BOM</td>' +  
                '<td nowrap>S.UOM</td>' +  
                '<td nowrap>Qty</td></tr>');  
   $('#BoMTable').dataTable({  
     "scrollY": 210,  
     "scrollX": true,  
     "paging": false,  
     "searching": false,  
     "bLengthChange": false, //used to hide the property  
     "bInfo": false,  
     "bSort": false  
   });  
 if you have any quires or any assistance in .net(c# Asp.net vb.net jquery) please visit... scriptquery blogger  
 http://scriptquery.blogspot.in/  

9:17 PM Share: