jquery DataTabale 数据列的增删

本文介绍了如何在jQuery的DataTabale插件中实现数据列的增删操作。通过使用fnRowCallback回调函数,可以动态地修改表格结构。在调整列的同时,需要注意保持HTML表格中的th元素与数据同步,以避免错误。测试结果显示,这种方法能够有效解决问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目里用到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();
  });

亲测,效果杠杠的。对上面有问题的可以评论留言,欢迎大家指教。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值