使用jQuery动态添加数据表中的列

Question

这是我的表。我无法动态地向表中添加额外的列。请帮忙。

<table id="example" class="table table-striped table-bordered compact table-hover" width="100%" cellspacing="0"> 
    <thead> 
     <tr> 
      <th>Part List</th> 
      <th>Score</th> 
      <th>Project 1</th> 
      <th>Final Score</th> 
      <th>Target Setting</th> 
      <th width="86px">Check box</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td> 
       <input type="checkbox" id="usr" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 

这是我的脚本。

var tabl = 0; 
$(document).ready(function() { 
    tabl = \$('#example').dataTable({ 
     "sScrollY": "300px", 
      "scrollCollapse": true, 
      "paging": false, 
      "bInfo": false, 
      "bSort": false, 
    }); 
});  

Answer 1

Create a two dynamic array aaColumnAllAns,aaDatavalAllAns 
var aaColumnAllAns =[]; 
var aaDatavalAllAns = []; 
start the loop after ajax return  
/$.post('testpage',array),function(data) {  
var productlist = data.prdlst;  
    /$.each(productlist, function(key, value) {  
    aaDatavalAllAns.push({"0":value.id,"1":value.name})  
    });  
aaColumnAllAns.push({ "sTitle": "ID" },{ "sTitle":"NAME"}  
}) 
table =$('#example').dataTable({                        
"sScrollY": "300px",                  
"scrollCollapse": true,                      
"paging": false, 
"bInfo": false,                          
"bSort": false,                    
"aoColumns":aaColumnAllAns, 
"aaData": aaDatavalAllAns 
});