Server side scripting using in MVC with mapped filed

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)

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 My IndexSS code is below

@{
ViewBag.Title = "Index";
//Layout = null;
}
<div class="EasyViewHeader">
<h1>ServerSide Listh1>
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 IDth>
<th>Order Sizeth>
<th>Specificationth>
<th>QTYth>
<th>MTRSth>
<th>STATUSth>
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

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Raju Fodse7y ago
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)
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 My IndexSS code is below
@{

    ViewBag.Title = "Index";
    //Layout = null;
}
<div class="EasyViewHeader">
    <h1>ServerSide Listh1>
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 IDth>
                    <th>Order Sizeth>
                    <th>Specificationth>
                    <th>QTYth>
                    <th>MTRSth>
                    <th>STATUSth>
                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
Arkadeep De7y ago
You can go for pagination in a stored procedure where you can maintain the no fo records to be shown in a page and get the specified number of data from the same. It will keep page load time in control.

Please go through the below link.
https://www.c-sharpcorner.com/blogs/efficient-paging-using-stored-procedure-in-sql-server