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

Posted 2023-05-07

【中文标题】如何显示来自另一个表的列数据而不是数据表的外键数据

【英文标题】：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。谢谢这么很多！ :)

【参考方案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 );

结果：