带pagination分页的DataTable表格用insertRow插入行未添加到末尾如何解决

你是直接操作DOM向表格插入行，但开启分页的DataTable初始化后会维护独立的内部数据源，所有渲染都以自身缓存的数据为准。你手动插入的DOM行没有被录入DataTable的数据源，调用draw()方法时DataTable会根据自身缓存的数据重绘表格，手动插入的行直接被覆盖，因此看不到新增内容。

不要直接操作原生DOM插入行，使用DataTable提供的row.add()官方API插入数据，插入的数据会自动同步到DataTable的内部数据源，重绘后正常展示。
修正后的代码如下：

// 先获取DataTable实例
var myTable = $('#MyExistingRandomTaskList').DataTable();
// 按表格列顺序构造新增行数据
var newRow = [
    myTable.rows().count() + 1, // Serial No，取当前总行数+1作为序号
    "R-1", // Task No
    document.getElementById("rbDescription").value, // Task Description
    "01-01-2021", // Assign Date
    rStartDate + "-" + rEndDate, // Task Timeline
    "Assign To Many", // Assign To
    "0%", // Complete %
    "Working On", // Status
    "Edit" // Edit Icon
];
// 插入行并重绘表格
myTable.row.add(newRow).draw();

// 所有单元格对齐样式可以直接在DataTable初始化时配置columns.className统一设置，不需要单独给单元格赋值

如果需要插入后自动跳转到最后一页展示新增行，把最后一行的draw调用改成如下即可：

myTable.row.add(newRow).draw(false).page('last').draw(false);

draw(false)参数表示重绘时保留当前分页状态，调用page('last')会直接跳转到最后一页。

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