Implement Datatable in MVC using jQuery

Question

I am trying to implement jquery datatable in mvc below is my controller code and View code But I get error. (I have client and Order table in which Client is master and Order is detail table).

Below is my controller code

public ActionResult IndexSS()
        {
            return View();
        }

        public ActionResult LoadData()
        {
            using (LPDBContext db = new LPDBContext())
            {
                var data = db.ValueAddLists.OrderBy(p => p.RefName).ToList();
                return Json(new { data = data }, JsonRequestBehavior.AllowGet);
            }


        }

 and below is My IndexSS code

@{

    ViewBag.Title = "Index";
    //Layout = null;
}
<div class="EasyViewHeader">
    <h1>ServerSide List</h1>
</div>
<div class="EasyViewDiv">
    <div style="width:90%">
        <table style="font-size:20px" class="table table-bordered table-hover" id="myTable">
            <thead>
                <tr>
                    <th>Order ID</th>
                    <th>Order Size</th>
                    <th>Specification</th>
                    <th>QTY</th>
                    <th>MTRS</th>
                    <th>STATUS</th>
                </tr>
            </thead>

        </table>
    </div>
</div>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/CustomStyle.css" rel="stylesheet" type="text/css" />
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<script src="~/Scripts/jquery-3.3.1.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/DatatableBS/datatables.min.css" rel="stylesheet" />
<script src="~/DatatableBS/datatables.min.js"></script>
<link href="~/Content/TablesStyle.css" rel="stylesheet" />



@section Scripts{

    <script>
    $(document).ready(function () {
        $("#myTable").DataTable({
            //"processing": true, // for show progress bar
            //"serverSide": true, // for process server side
            //"filter": false, // this is for disable filter (search box)
            //"orderMulti": false, // for disable multiple column at once
            "ajax": {
                "url": "/Orders/LoadData",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                    { "data": "OrderID", "name": "OrderID", "autoWidth": true },
                    { "data": "ORDSZ", "name": "ORDSZ", "autoWidth": true },
                    { "data": "PISPEC", "name": "PISPEC", "autoWidth": true },
                    { "data": "ORDQTY", "name": "ORDQTY", "autoWidth": true },
                    { "data": "ORDMTR", "name": "ORDMTR", "autoWidth": true },
                    { "data": "Status", "name": "Status", "autoWidth": true }

            ]
        });
    });
    </script>

}

 

But I get following error while running application

DataTables warning: table id=myTable - Ajax error. For more information about this error, please see http://datatables.net/tn/7.

 

and same code running smoothly on single table which not having any forign key references. How can i RETRIVE data in datatable