JQuery 数据表不可见

Question

我有一个用 C# 编写的 ASP.NET Core MVC Web 应用程序。我创建了一个 Razor 视图，在该视图中，我水平显示 2 个 jQuery 数据表，在这 2 个数据表之间有 3 个按钮。

这些控件位于容器中。但运行应用程序时，只有边框可见 - 2 个数据表不可见。

 @model LMD_WEB.ViewModels.vmStudentMaster
 @{
    Layout = null;
  }

  <style>
        .container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 20px;
        }      

        .datagrid {
        flex: 1;
        margin: 10px;
        border: 1px solid black;            
         }

       .buttons {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 10px;
        }

        .buttons button {
            margin: 5px 0;
        }

       .footer-buttons {
        display: flex;
        justify-content: space-between;
         margin: 10px;
        }

       .textbox {
        margin: 10px;
        }

        .textbox input {
            width: 100%;
        }
    </style>

    <div class="textbox">
        <input type="text" placeholder="Text box" />
    </div>

    <div class="container">
        <div class="datagrid" id="datagrid1">
        <table id="table1" class="display table-bordered" 
               style="width:100%">        
        </table>
    </div>
    <div class="buttons">
         <button id="button1">Button1</button>
         <button id="button2">Button2</button>
         <button id="button3">Button3</button>
    </div>
    <div class="datagrid" id="datagrid2">
         <table id="table2" class="display table-bordered" 
                style="width:100%">
         </table>
    </div>
    </div>
    <div class="footer-buttons">
         <button id="buttonCancel">Cancel</button>
         <button id="buttonOK">OK</button>
    </div>


   <script>

   $(document).ready(function () {
        $('#table1').DataTable();
        $('#table2').DataTable();
        LoadGrid1();
    });

   const LoadGrid1 = async () => {
    $("#DATATABLE1").DataTable({
        serverSide: true,
        filter: false,
        scrollY: StaticData.TABLE_HEIGHT + 'px',
        scrollX: true,
        lengthMenu: StaticData.TABLE_PAGE_SIZE,
        scrollCollapse: true,
        searchDelay: 800,
        ajax: {
            url: '/STUD_MANAGEMENT/LoadStuds',
            type: 'GET',
            datatype: 'json',
            data: (d) => { return { draw: d.draw, start: d.start, length: d.length, search: d.search.value, FilterByColumn: d.columns[d.order[0].column].data, ASC_DSEC: d.order[0].dir } },
            beforeSend: () => { ShowLoader(); },
            complete: () => { HideLoader(); },
            dataSrc: (json) => {
                json = json.data;
                _log(json);
                return json;
            }
        },
        columns: [
            { data: 'StudID', title: StudID', autoWidth: true },
            { data: 'StudCode', title: 'Stud Code', autoWidth: true },
            { data: 'ClassNo', title: 'Class No', autoWidth: true },
            { data: 'Teacher', title: 'Teachere', autoWidth: true },
            { data: 'Remarks', title: Remarks', autoWidth: true },
                ],
        columnDefs: [
            { className: 'text-center', targets: [0, 2, 4] },
        ],
       });
    }

    </script>

如何使这 2 个数据表在此 Razor 视图中可见？

Answer 1

恐怕这是因为js代码没有执行。您提到您正在使用

ASP.NET Core MVC

应用程序，因此脚本应该被

@section Scripts{}

包围。与此同时，您的代码片段存在一些问题。您没有渲染

table1

和

table2

的表格内容，而仅渲染

DATATABLE1

的表格内容。而且您错过了 title: StudID' 和

title: Remarks'

的

'

，无论如何，请参阅下面的代码测试。 HTML 元素和样式与您的代码片段相同。

@section Scripts{
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

    <script>

        $(document).ready(function () {
            $('#table1').DataTable({
                ajax: {
                    "url": "/table/LoadStuds",
                    "type": "GET",
                    "dataSrc": function (myJson) {
                        console.info(myJson)
                        return myJson;
                    }
                },
                columns: [
                    { data: 'studID', title: 'StudID', autoWidth: true },
                    { data: 'studCode', title: 'Stud Code', autoWidth: true },
                    { data: 'classNo', title: 'Class No', autoWidth: true },
                    { data: 'teacher', title: 'Teachere', autoWidth: true },
                    { data: 'remarks', title: 'Remarks', autoWidth: true },
                ]
            });
            $('#table2').DataTable();
        });
    </script>
}


public class TableController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    public List<Student> LoadStuds() {
        var list = new List<Student> {
            new Student{ StudID="1",StudCode="1001",ClassNo="A",Teacher="David",Remarks="good"},
            new Student{ StudID="2",StudCode="1002",ClassNo="A",Teacher="David",Remarks="perfect"},
            new Student{ StudID="3",StudCode="1003",ClassNo="B",Teacher="Yang",Remarks="bad"},
            new Student{ StudID="4",StudCode="1004",ClassNo="A",Teacher="David",Remarks="bad"}
        };
        return list;
    }
}

public class Student {
    public string StudID { get; set; }
    public string StudCode { get; set; }
    public string ClassNo { get; set; }
    public string Teacher { get; set; }
    public string Remarks { get; set; }

}