JQuery Datatable is not visible

Question

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?

Answer 1

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

}