jQuery DataTable如何动态在表格首位插入行并自动更新序号

要实现新行插入到表格最顶部、同时保留DataTable原有所有功能（列拖拽、列显隐、排序等），不需要修改原有表格初始化配置，直接调整新增行的逻辑即可。

DataTable原生row.add()默认把行加到数据集末尾，没有直接提供prepend方法，通过自定义排序优先级+序号重算的方式就能实现需求，完全兼容现有代码。

可直接替换的实现代码 #

function addNewRow() {
    const table = $('#example').DataTable();
    const rowCount = table.rows().count();
    const newRowId = `lclSsrContainer_${rowCount}`;

    // 插入新行，序号列先留空后续统一计算
    const newRowNode = table.row.add([
        '',
        'vuyv',
        '54',
        '89855'
    ]).node();

    // 保留原有新行ID、自定义样式逻辑
    newRowNode.id = newRowId;
    newRowNode.setAttribute('style', 'color: #0822f3;');
    newRowNode.setAttribute('data-prepend-row', 'true');

    // 绘制表格时传入false，保留当前分页位置不跳页
    table.draw(false);

    // 注册自定义排序规则，带prepend标记的行优先级最高
    $.fn.dataTable.ext.order['prepend-row-first'] = function(settings, colIndex) {
        return this.api().column(colIndex, {order: 'index'}).nodes().map(td => {
            return td.parentElement.getAttribute('data-prepend-row') === 'true' ? 0 : 1;
        });
    };
    // 应用排序把新行顶到最前
    table.order([0, 'asc']).draw(false);

    // 全表重算序号，保证序号从1开始连续
    table.column(0).nodes().each((cell, index) => {
        cell.innerText = index + 1;
    });

    // 不需要永久固定新行位置的话，清除标记，后续用户手动排序不受影响
    setTimeout(() => {
        newRowNode.removeAttribute('data-prepend-row');
    }, 0);
}

关键逻辑说明 #

• 没有改动任何DataTable原有初始化配置，已引入的ColReorder列拖拽、Buttons列显隐插件都能正常工作
• 序号列每次插入新行后统一重渲染，不管行顺序怎么调整，序号始终连续正确
• 新行样式、自定义ID的逻辑和原有代码完全一致，不会影响关联的业务逻辑
• 如果需要新行永久固定在表格顶部，删掉最后setTimeout清除标记的代码即可

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