项目里用到jquery的DataTabale插件,挺好用。不了解的请自行百度,今天遇到个问题,想要对表格里的某列进行增删操作,网上没搜到,后来机智的我查文档解决了。
解决的方法就是利用DataTable的回调函数fnRowCallback。
先给一个简单的表格html代码,DataTable是不需要tbody的哟!
<table >
<thead>
<tr>
<th>列1</th>
<th id="th2">列2</th>
<th id="th3">列3</th>
<th>列4</th>
<th>列5</th>
<th>列6</th>
</tr>
</thead>
</table>
fnRowCallback回调函数用在datatable的定义中:
"fnRowCallback":function(nRow, aData, iDisplayIndex) {
//增加第6列,类似于js中的appendTo函数
var action = "html代码";
$('td:eq(5)',nRow).html(action);
//将第2、3列数据删除,注意删除第2列删除后第3列就变成了第2列,因此删除代码一样
//使用if语句是因为我只在某种条件下删除列,不需要的可以去掉if语句
if($(selector).val() != 'some_condition'){
$('td:eq(1)',nRow).remove();
$('td:eq(1)',nRow).remove();
}
return nRow;
}
注意html中的表格代码要逻辑同步,也就是说,你这里添加,删除某列数据的时候,表格里的th也要同步,不然会报错。
//触发重绘的时候删除列2和列3的表头
$('#btn').click(function(){
if($(selector).val() != 'some_condition'){
$('#th2').attr('style','display:none');
$('#th3').attr('style','display:none');
} else {
$('#th2').attr('style','');
$('#th3').attr('style','');
}
table.fnDraw();
});
亲测,效果杠杠的。对上面有问题的可以评论留言,欢迎大家指教。