如何在DataTable中根据条件为Uraian列设置Colspan并移除后续列？

直接通过CSS隐藏列会导致DOM中仍保留这些单元格，进而引发DataTable布局错乱（比如你截图中出现的对齐问题）。正确的做法是移除后续单元格并配合正确的colspan设置，确保行结构与表格列数匹配。

修改后的代码实现 #

table = $('#dataTable').DataTable( {
    "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
    "destroy": true,
    "paging": true,
    "sorting": true,
    "responsive": true,
    "ajax": {
        "type": "POST",
        "url": "modul/mod_instrumen/elemen_action.php",
        "data": {jenis:jenis},
        "timeout": 120000,
        "dataSrc": function (json) {
            return json !== null ? json : "";
        }
    },
    columns: [ 
        {
            "name": "No", "title": "No",
            "data": null,
            render: function (data, type, row, meta) {
                return meta.row + meta.settings._iDisplayStart + 1;
            }
        },
        {
            "data": null,
            "name": "#",
            "title": "#",
            "width": "120px",
            "render": function (data, row, type, meta) {
                return `<button id="${data.id}" class="btn btn-warning btn-sm edit_data" title="Update Data"><i class="fa-solid fa-square-pen"></i></button>
                <button id="${data.id}" class="btn btn-primary btn-sm view_data" title="Lihat Data"> <i class="fa fa-search"></i></button>
                <button id="${data.id}" class="btn btn-danger btn-sm hapus_data" title="Hapus Data"><i class="fa-solid fa-trash-can"></i></button>`;
            }
        },
        {data: 'kode', name: 'kode', title: 'Kode'},    
        {data: 'uraian', name: 'uraian', title: 'Uraian'},  
        {data: 'fakta_dan_analisis', name: 'fakta_dan_analisis', title: 'Fakta dan Analisis'}, 
        {data: 'regulasi', name: 'regulasi', title: 'Regulasi'}, 
        {data: 'observasi', name: 'observasi', title: 'Observasi'}, 
        {data: 'wawancara', name: 'wawancara', title: 'Wawancara'}, 
        {data: 'simulasi', name: 'simulasi', title: 'Simulasi'},
        {data: 'dokbuk1', name: 'dokbuk1', title: 'Dokumen Bukti'}
        
    ],
    createdRow: function(row, data, dataIndex){
        // 同时处理空字符串和null的情况
        const faktaData = data.fakta_dan_analisis;
        if(faktaData === '' || faktaData === null){
            const uraianCell = $('td:eq(3)', row);
            
            // 方案1：移除Uraian之后的所有列（共6列），因此colspan设为7（自身1列+后续6列）
            uraianCell.attr('colspan', 7);
            // 移除Uraian之后的所有单元格
            uraianCell.nextAll().remove();
            
            // 方案2：仅移除后续5列（匹配你原代码的colspan=6设置），保留最后一列Dokumen Bukti
            // uraianCell.attr('colspan', 6);
            // $('td:eq(4)', row).nextUntil('td:eq(9)').remove();
        }
    },
});

关键说明 #

1. 移除单元格而非隐藏：使用nextAll().remove()直接删除后续单元格，彻底避免DOM残留导致的布局问题。
2. 正确设置colspan：
   • 若要移除Uraian之后所有列（共6列），需将colspan设为7（当前列+后续6列）。
   • 若仅移除后续5列（保留最后一列），则colspan设为6，并使用nextUntil精准删除指定范围的单元格。
3. 空值判断优化：同时检查空字符串和null，覆盖更多数据场景。

内容的提问来源于stack exchange，提问作者Fragments Wind