DataTable inside the RazorView is not visible

chandhu

The Datatable is not visible inside the Razor View. I am using asp.net core mvc web app (C# version 6.0)
The below code is in the StudentDetails.cshtml razor view.

@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;
            background-color:blue;
        }

        .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">Button Cancel</button>
    <button id="buttonOK">Button OK</button>
</div>




<script>

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

    const LoadGrid1 = async () => {
        $("#table1").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/LoadStudent',
                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;
                }
            },
            columnDefs: [{ className: "dt-center", targets: [0,2,4], width: '2%', }],
            columns: [
                { data: 'StudID', title: Stud ID', autoWidth: true },
                { data: 'StudCode', title: 'Stud Code', autoWidth: true },               
                { data: 'StudName', title: 'Stud Name', autoWidth: true },                
                    ],            
            ],
        });
    }   

</script>

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Do you get errors in the browser's console?

You don't want line 80 (and probably line 81) since this will initialize a default Datatable. Calling LoadGrid1(); should result in the Warning: Cannot reinitialise DataTable error since you have initialized it on line 80. Try this:

     $(document).ready(function () {
        LoadGrid1();
        });

If you still have issues we will need to see your page or a test case replicating issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

RichardD2

Where are the lines to include jQuery, and the DT script/styles?

You've set Layout = null, so the only output you'll get is what's in this view.