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