如何显示来自另一个表的列数据而不是数据表的外键数据答案

【问题标题】：How to display a column data from another table instead of foreign key data for a datatable如何显示来自另一个表的列数据而不是数据表的外键数据
【发布时间】：2021-05-13 14:53:46
【问题描述】：

我实施在ASP.NET核心3.1的溶液。我有一个数据表，我想通过AJAX调用来加载数据到它像下面和它的数据完全装载到其中：

jQuery(document).ready(function ($) {
    $("#myDummyTable").DataTable({
 
        "processing": true, // for show progress bar
        "serverSide": true, // for process server side
        "filter": true, // this is for disable filter (search box)
        "orderMulti": false,
 
 
        "ajax": {
            "url": "MyData/GetData",
            "type": "POST",
            "datatype": "jason"
        },
        "columnDefs": [{
            "targets": [0],
            "visible": false,
            "searchable": false
        }],
 
         "columns": [
            { "data": "id", "name": "Id", "autoWidth": true },
            { "data": "name", "name": "Name", "autoWidth": true },
            { "data": "applicantId", "name": "applicantId", "autoWidth": true },
 
        ]
 
    });
});

但我的问题是applicantId上面列是另一个表的外键名为Applicant代替作为applicantId价值本身，这是一个数字，我想表明列Name Copyright of晋江数据在jQuery的数据表视图相关Applicant

我很感激，如果任何人都可以建议如何做到这一点。 P>

【问题讨论】：

你有MyData/GetData JSON过的内容的控制和结构？你可以改变它，包括您所需要的FK数据？ SPAN>
（次要注意：它应该是"dataType": "json"，@不@ 987654330而且它可能无法在所有需要如果MIME类型设置正确）跨度>
嗨@ MinaMRM，如果我的回答可以帮助您解决您的问题，记得要接受为answer.If没有，你可以请跟进，让我知道参见：How to accept as answer。谢谢这么很多！ :)

标签： asp.net-core datatables jquery-plugins

【解决方案1】：

您似乎想显示嵌套模型列，您可以查看下面的演示：

型号：

public class Test
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int ApplicantId { get; set; }
    public Applicant Applicant { get; set; }
}
public class Applicant
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<Test> Tests { get; set; }
}

查看：

<table id="myDummyTable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>applicantname</th>

        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>id</th>
            <th>goodsName</th>
            <th>applicantname</th>
        </tr>
    </tfoot>
</table>

可见的JS：

@section Scripts
{
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
    <script>
        jQuery(document).ready(function ($) {
            $("#myDummyTable").DataTable({
                "ajax": {
                    "url": "/MyData/GetData", //be sure the request url is correct,it should be `/xxx/xxx` not `xxx/xxx`
                    "type": "POST",
                    "datatype": "json"
                },

                "columns": [
                    { "data": "id", "name": "Id", "autoWidth": true },
                    { "data": "name", "name": "Name", "autoWidth": true },

                       //change here...
                    { "data": "applicant.name", "name": "applicant.name", "autoWidth": true },

                ]

            });
        });
    </script>
}

控制器：

[HttpPost]
[Route("MyData/GetData")]
public IActionResult TestData()
{
    var data = new List<Test>()
    {
        new Test(){Id=1,Name="aa",Applicant=new Applicant(){ Id=1,Name="app1"} },
        new Test(){Id=2,Name="bb",Applicant=new Applicant(){ Id=1,Name="app2"} },
        new Test(){Id=3,Name="bb",Applicant=new Applicant(){ Id=1,Name="app3"} }
    };
    return Json(new { data = data });
}

结果：

【讨论】：