JQuery Datatable is not visible

I have an ASP.NET Core MVC web application written in C#. I created a Razor view and in that view, I show 2 jQuery datatables horizontally and in between these 2 data tables, there are 3 buttons.

These controls are in a container. But when running the app, only the border is visible - the 2 data tables are not visible.

 @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>

How to make these 2 datatables visible in this Razor view?

Solution

I'm afraid this is due to the js code doesn't execute. You mentioned you are working in the ASP.NET Core MVC application, so that the scripts should be surrounded by @section Scripts{}. In the meantime, your code snippets have some issue. You didn't render table content for table1 and table2, but only for DATATABLE1. And you missed ' for title: StudID' and title: Remarks', anyway, please see my test with codes below. HTML element and styles are the same with your code snippet.

@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; }

}