DataTables插件集成遇偶发Error 18，列数正确却不知如何修复

我正在项目中集成DataTables插件，通过AJAX调用从API读取数据并展示在首页表格中，但插件无法正常工作，还偶尔触发Error 18。已经确认表头和数据列数量一致，不知道从哪里入手修复。之前怀疑是最后一列的span类导致，但已经排除这个可能，求排查解决方法。

生成表格的代码 #

function persona_table(persona) {
let table = `

    <!-- Creo la tabella -->
    
    <table id="principale" style="width:100%" class="table">
        <thead>

            <tr>
                <th style:"text-align: center">Giorno</th>
                <th style:"text-align: center">Nome</th>
                <th style:"text-align: center">Peso Corporeo</th>
                <th style:"text-align: center">Azioni<th>
            </tr>
        </thead><tbody>`;

        $.each(persona, function(key, val) {

            table+=`
            
            <tr>
                <td>` + val.giorno + `</td>      
                <td style:"text-align: center">` + val.name + `</td>
                <td>` + val.weight_utente + `Kg</td>


                        <td class='text-right'>
                            <div class='btn-group btn-group-sm'>


                            <button  title="button per leggere uno" class='btn btn-primary me-2 leggi_una_persona_button' data-id='` + val.giorno + `'>
                                <span class='fa fa-eye'></span> <small></small>
                            </button>

                            
                            <button title="button per modificare uno" class='btn btn-info me-2 aggiorna_persona_button' data-id='` + val.giorno + `'>
                                <span class='fa fa-edit'></span> <small></small>
                            </button>


                            <button title="button per eliminare uno" class='btn btn-danger cancella_persona_button' data-id='` + val.giorno + `'>
                                <span class='fa fa-remove'></span> <small></small>
                            </button>
                        </td>
                    </div>
            </tr>`;
        });
table+=`</tbody></table>

return table;  }

排查解决步骤 #

• 修复HTML结构错误：你的代码存在两处关键的标签闭合问题，这是DataTables解析失败的核心原因：
  1. 表头最后一个<th>未闭合：将<th style="text-align: center">Azioni<th> 修改为 <th style="text-align: center">Azioni</th>
  2. 按钮组的<div>标签位置错误：当前</div>放在了<td>标签外面，应该调整到</td>之前，确保DOM结构嵌套正确。
• 确认DataTables初始化时机：必须先将生成的表格HTML插入到页面DOM中，再调用DataTables初始化方法。例如：

  // 假设API返回数据后调用
  $.get('/api/persona', function(data) {
    $('#table-container').html(persona_table(data));
    // 等待DOM插入完成后初始化
    $('#principale').DataTable();
  });
  

• 校验AJAX返回数据完整性：检查API返回的persona数组中，每个对象的giorno、name、weight_utente字段是否都存在，没有undefined或空值的情况，避免生成不完整的<td>内容。
• 明确DataTables列配置：初始化时可以手动指定列配置，关闭自动宽度检测，避免解析异常：

  $('#principale').DataTable({
    autoWidth: false,
    columns: [
      { orderable: true },
      { orderable: true },
      { orderable: true },
      { orderable: false } // 操作列不需要排序
    ]
  });
  

• 查看浏览器控制台错误：打开开发者工具（F12）的Console面板，排查是否有jQuery未加载、图标资源报错等其他JS异常，这些可能间接导致DataTables无法正常工作。

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