jquery DataTabale 数据列的增删

最新推荐文章于 2021-09-29 13:44:30 发布

原创最新推荐文章于 2021-09-29 13:44:30 发布 · 976 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#datatable #jquery

本文介绍了如何在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();
  });