jquery - 使用jQuery在数据表中动态添加列

Question

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

<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
});