DataTables勾选主联系人行未移至首位问题修复求助

问题现象 #

代码可正常实现添加行功能，但勾选primary contact（主联系人）复选框时，目标行被移至表格末尾而非首位。

问题原因 #

DataTables的row.add()方法默认会将行添加到数据集的末尾，原代码移除行后直接调用该方法，导致行被追加到表格最后。

修复后的代码 #

//add row in contact
$(document).ready(function () {
    var table = $('#lv_Lead_Contact_Information-datatable').DataTable({
        dom: "t"
    });

    //ensure the primary contract is only one
    $(document).on('change', '.primary-contact-checkbox', function () {
        if (this.checked) {
            // Uncheck all other checkboxes
            $('.primary-contact-checkbox').not(this).prop('checked', false);

            // Get the row of the checked checkbox
            var row = $(this).closest('tr');
            var tbody = table.table().body();

            // Move the row to the top of the table
            row.fadeOut(function () {
                // 从DataTables中移除该行
                table.row(row).remove().draw(false);
                // 将行元素插入到tbody最前端
                $(tbody).prepend(row);
                // 让DataTables重新识别该行并刷新视图
                table.row(row).invalidate().draw(false);
                row.fadeIn();
            });
        }
    });

    $(document).on('click', '#btnAddContact', function () {
        table.row.add([
            '<input type="checkbox" class="form-check-input primary-contact-checkbox" style="vertical-align: middle; margin-left: 21px;">',
            '<input type="text" class="form-control form-control-borderless">',
            '<input type="text" class="form-control form-control-borderless">',
            '<input type="text" class="form-control form-control-borderless">',
            '<input type="text" class="form-control form-control-borderless">',
            '<input type="text" class="form-control form-control-borderless">',
            '<input type="text" class="form-control form-control-borderless">',
            '<input type="text" class="form-control form-control-borderless">',
            '<input type="checkbox" class="" style="vertical-align: middle; margin-left: 19px;">',
            '<input type="text" class="form-control form-control-borderless">'
        ]).draw();
    });
});

修复说明 #

• 移除行后，不再使用默认追加到末尾的row.add()，改用$(tbody).prepend(row)将行元素直接插入到表格tbody的最前端。
• 调用table.row(row).invalidate().draw(false)，让DataTables重新识别该行的DOM结构、更新内部数据集，同时保持当前视图状态不重置。

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