我一直在为一个任务做一个待办事项列表web应用程序，并且一直使用以下代码到现在：

const db = new Database();

document.addEventListener("DOMContentLoaded", function(event) {
    setTimeout(function() {
      db.getAllTodos(function(records) {
          records.forEach(function() {
            console.log(records.length);
            var cols = ['taskName','taskDesc', 'taskDate','taskTime','taskPriority','taskLocation','taskImage'];
              for (var i = 0; i <= records.length; i++){
                $('table').append('<tr></tr>' );
                for (var j = 0; j < cols.length; j++) {
                  var lastCell = $('table tr:last-child');
                  lastCell.append ('<td>' + records[i][cols[j]] + '</td>' );
                }
                  lastCell.append("<td class=\"delete\"><button  onclick=\"deleteTask()\">Delete</button><button onclick=\"editTask()\">Edit</button></td>");
              }
            })
      });
    }, 1000);
});

到目前为止，这一直运行良好，但现在我尝试使用DataTable添加对数据进行排序的功能，数据被添加到表的标题和正文中，我不知道为什么。如果我删除用于初始化DataTable的代码，问题将持续存在。
Image showing the table with datatable being used
Image showing the table without datatable being used
从昨天开始，我一直在研究这个问题，并查看chrome调试工具，但毫无进展，代码与以前完全相同，我甚至从以前保存的文件中复制粘贴了它，同样的问题仍然存在。我想这可能与使用DataTables网站的JQuery导入链接有关，所以我用标准的JQuery再次测试，结果完全一样。任何建议都是非常感谢，谢谢！