如何使用 Ajax 调用加载 jquery 数据表，从多个表中加载表详细信息（主、详细信息）答案

【问题标题】：How to load jquery datatable using Ajax call, Loading table details from multiple tables (Master, Detail)如何使用 Ajax 调用加载 jquery 数据表，从多个表中加载表详细信息（主、详细信息）
【发布时间】：2017-10-25 03:55:20
【问题描述】：

Web 技术的新手和学习者。这里需要指导如何做到这一点的正确方法。为了解释我正在寻找的要点，这是一个映射到我正在使用的数据库结构的简单模型。

三个表实体：Company、Employee、EmpDetail

关系：公司 1__* 员工，员工 1__1 EmpDetail

所以我的页面顶部有Company 的详细信息，以及属于该公司的Employees 的数据表。每个员工（表行）都有一个 Load 操作链接，用于在 Bootstrap 弹出式模态或任何类型的对话框中打开一个表单，该链接显示该员工的 EmpDetails。我可以编辑/更新 EmpDetails 并使用 ajax.beginForm() 将此表单提交回服务器，即仅使用 ajax 发回更新的 EmpDetails。

直到我尝试使用 ajax 加载数据表并感到困惑时，所有这些都已完成。

为什么要对数据表进行 Ajaxing 的原因？？ 所以，这是因为我希望在 Employee DataTable 中有一个 status 列，当您更改 EmpDetails 并提交它时它会发生变化。所以我想在用户每次更改 Empdetail 后刷新 Datatable。 “我希望这是有道理的” :) ，正如我所研究的那样，您使用 AJAX 调用执行数据表重新加载/刷新位。是的，这就是原因。

因此，在通过 Ajax 调用加载任何内容之前，我使用 ViewModel 类很简单，它在其中定义了一个员工列表。并将所有内容一起加载。

public class CompanyViewModel
{
    // Some Company table prperties
    public long Id { get; set; }
    public string Name { get; set; }

    public list<Employee> listOfEmployees { get; set; }
}

现在我希望使用 ajax 加载数据表，每个员工行都有一个链接，可以打开员工详细信息表，以便对其进行编辑。

我见过很多线程和方法，但它们会因需求而异。我不想在这里进行任何延迟加载。我希望一次加载所有员工数据表，并让 jquery 数据表插件处理客户端的分页，因为员工列表不大。

非常感谢任何建议，尤其是一些详细介绍这些概念的写得很好的文章。谢谢，

我正在使用实体框架来管理我的实体。

【问题讨论】：

你检查了this？您可以将要编辑的所有数据保存在隐藏行中，并在点击编辑时获取数据。

标签： jquery asp.net-mvc-5 datatables entity-framework-6

【解决方案1】：

关于这个主题的文章写得很好，我会开始here

然后是here，还有部分3和4你也可以查看，我认为本教程几乎涵盖了你想了解的有关数据表插件的所有基础知识

记住你会发现很多例子here

如果您已经知道如何使用数据表，但只想为每一行加载许多数据，请使用回调，

drawCallback: function (oSettings) {
    if (oSettings.aiDisplay.length > 0) {
        for (var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) {
            var row = oSettings.aoData[oSettings.aiDisplay[i]];
            var rowItem = row.nTr;
            //Assuming you are loading employee, row._aData will be the current employee object.
            // this will get his id for example  
            var empid = row._aData.EMPID;
            var empDetail = row._aData.EmpDetail;
            //do something with EmpDetail, (maybe add to hidden div), or display in another cell in this row 
            // ex
            $('td:eq(4)', rowItem).html("some html template + emp detilas");     
        } 
    }
}

还请注意，如果您的 linq 未使用员工加载 emp 详细信息，则会引发错误，你可以像这样加载它

var empdata = dbcontext.Employees.Include(g => g.EmpDetail).toList();

我希望这会有所帮助。

【讨论】：