可数据卡在“处理”初始加载 [英] Datatable stuck on "Processing" on initial load
本文介绍了可数据卡在“处理”初始加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
但是当我加载我的页面时，DataTable被卡住关于处理。我已经尝试改变处理关闭和服务，并且仍然不起作用。
当我打开ServerSide：True它收到错误：
jquery-1.10.2.js：8720
GET http：// localhost：51326 / Table / Index？draw = 1& columns％5B0％ 5D％5B数据％5D = 0& column ... art = 0& length = 10& search％5Bvalue％5D =& search％5Bregex％5D = false& _ = 1480635427759 404（未找到）
这是我的Controller提供的数据，以及我的类用于创建AJAX。
public class stockAJAX
{
public int StockId {get;组; }
public string ProductGroup {get;组; }
public string GroupType {get;组; }
public string ItemType {get;组; }
public string Model {get;组; }
public string SerialNo {get;组; }
public string NR {get;组; }
public string Status {get;组; }
public string描述{get;组; }
public string DateArrived {get;组; }
public int？ CurrentLocation {get;组; }
public string TerminalId {get;组; }
}
public class TableController：Controller
{
列表< stockAJAX> stock = new List< stockAJAX>（）;
stockAJAX ajaxTemp = new stockAJAX（）;
static string csv;
[AcceptVerbs（HttpVerbs.Get | HttpVerbs.Post）]
public JsonResult getAJAX（）
{
using（TableEntities context = new TableEntities ）
{
股票=（从c在上下文中的c
选择新股票AJAX
{
StockId = c.StockId，
ProductGroup = c。 ProductGroup，
GroupType = c.GroupType，
ItemType = c.ItemType，
Model = c.Model，
SerialNo = c.SerialNo，
NR = c。 NR，
Status = c.Status.ToString（），
描述= c.Description，
DateArrived = c.DateArrived.ToString（），
CurrentLocation = c.CurrentLocation，
TerminalId = c.TerminalId，
}
）.Take（1000）.ToList（）;
}
return Json（stock，JsonRequestBehavior.AllowGet）;
}
这里是我在我的视图中的与DataTable有关的javascript： p>
var Json = [
{StockId：0，
ProductGroup：，
GroupType： ，
ItemType：，
模型：，
SerialNo：，
NR：，
状态：，
描述：，
DateArrived：，
当前位置：0，
TerminalId：，
}，
];
$（＃myTable）。DataTable（{
serverSide：true，
processing：true，
JQueryUI b $ bstateSave：true，
ajax：$ .ajax（{
contentType：'application / json; charset = utf-8'，
dataType：'json'
类型：'GET'，
url：'/ Table / getAJAX'，
data：Json，
failure：function（）{alert（unavailable AJAX）;} ，
}）
}）;
$（'＃load'）。hide（）;
$（'＃myTable'）。show（）;
$（＃myTable）。DataTable（）。columns（）。every（function（）{
var that = this;
$（'input'，this.footer（））.on（'keyup change'，function（）{
if（that.search（）！== this.value）{
that
.search（this.value）
.draw（）;
}
}）;
}）;
}）;
和我的Datatable这里：
< table class =table-fillid =myTable>
< thead>
< tr>
< th>
< p1>库存ID< / p1>
< / th>
< th>
< p1>产品组< / p1>
< / th>
< th>
< p1>组类型< / p1>
< / th>
< th>
< p1>项目类型< / p1>
< / th>
< th>
< p1>模型< / p1>
< / th>
< th>
< p1>序列号< / p1>
< / th>
< th>
< p1> NR< / p1>
< / th>
< th>
< p1>状态< / p1>
< / th>
< th>
< p1>说明< / p1>
< / th>
< th>
< p1>到达日期< / p1>
< / th>
< th>
< p1>当前位置< / p1>
< / th>
< th>
< p1>终端ID< / p1>
< / th>
< / tr>
< / thead>
< tfoot>
< tr>
< th> Id< / th>
< th>产品< / th>
< th>组< / th>
< th> Item< / th>
>模型< / th>
< Serial< / th>
< NR> NR<
< th>状态< / th>
< th> Descr< / th>
< th> Date< / th>
< th>位置< / th>
th T-ID< / th>
< / tr>
< / tfoot>
< / table>
编辑：
这是我的索引控制器中的功能：
[AcceptVerbs（HttpVerbs.Get | HttpVerbs.Post）]
public ActionResult索引.Web.Mvc.FormCollection collection）
{
// DateTime lastMonth = DateTime.Today.AddMonths（-6）;
//从Select Company DropDownList收到数据
string selectedList = collection [list];
//从Select GroupType中收到数据DropDownList
string selectedGroupType = collection [grouptype];
//从显示所有库存复选框收到数据
string selectedAmount = collection [amount];
//类型为< stock>的列表具有从计算要使用哪个查询然后执行的函数的函数收到的值。
returnList（selectedGroupType，selectedList，selectedAmount）;
//返回视图
return View（）;
}
解决方案
我通过更改我如何定义我的DataTable以及定义我的JSON来修复这个问题：
[AcceptVerbs（HttpVerbs.Get | HttpVerbs.Post）]
public JsonResult getAJAX（）
{
using（TableEntities context = new TableEntities（））
{
stock =（from c in context.stocks
select new stockAJAX
{
StockId = c.StockId，
ProductGroup = c.ProductGroup，
GroupType = c。 GroupType，
ItemType = c.ItemType，
Model = c.Model，
SerialNo = c.SerialNo，
NR = c.NR，
Status = c。 Status.ToString（），
描述= c.Description，
DateArrived = c.DateArrived.ToString（），
CurrentLocation = c.CurrentLocation，
TerminalId = c.TerminalId，
}
）.Take（1000）.ToList（）;
}
return Json（new
{
iTotalRecords = 1000，
iTotalDisplayRecords = 10，
sEcho = 10，
aaData = stock}，JsonRequestBehavior.AllowGet）;
}
和我的javascript：
数据表（{
JQueryUI：true，
stateSave：true，
ajax
$ ：'/ Table / getAJAX'，
columns：[
{data：StockId}，
{data：ProductGroup}，
{ data：GroupType}，
{data：ItemType}，
{data：Model}，
{data：SerialNo} ，
{data：NR}，
{data：Status}，
{data：Description}，
{data ：DateArrived}，
{data：CurrentLocation}，
{data：TerminalId}
]，
}） ;
但是，当我尝试以下列方式查询整个数据库时，会收到一个500服务器错误，但如果我查询1000个条目它可以正常工作。
using（TableEntities context = new TableEntities（））
{
stock =（from c in context.stocks
select new stockAJAX
{
StockId = c.StockId，
ProductGroup = c.ProductGroup，
GroupType = c.GroupType ，
ItemType = c.ItemType，
Model = c.Model，
SerialNo = c.SerialNo，
NR = c.NR，
Status = c.Status .ToString（），
描述= c.Description，
DateArrived = c.DateArrived.ToString（），
CurrentLocation = c.CurrentLocation，
TerminalId = c.TerminalId，
}
）.ToList（）;
}
I am attempting to GET AJAX from my Controller to populate my Datatable. I have tested my GET with POSTMAN and it provides the correct AJAX, and the success: function works correctly on my DataTable.
However when I load my page the DataTable is stuck on "Processing". I have tried changing processing off and serveSide on and it still does not work.
When I turn ServerSide: True it recieves the error:
jquery-1.10.2.js:8720
GET http://localhost:51326/Table/Index?draw=1&columns%5B0%5D%5Bdata%5D=0&column…art=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1480635427759 404 (Not Found)
Here is my Controller which provides the data, as well as my class used to create the AJAX.
public class stockAJAX
{
public int StockId { get; set; }
public string ProductGroup { get; set; }
public string GroupType { get; set; }
public string ItemType { get; set; }
public string Model { get; set; }
public string SerialNo { get; set; }
public string NR { get; set; }
public string Status { get; set; }
public string Description { get; set; }
public string DateArrived { get; set; }
public int? CurrentLocation { get; set; }
public string TerminalId { get; set; }
}
public class TableController : Controller
{
List<stockAJAX> stock = new List<stockAJAX>();
stockAJAX ajaxTemp = new stockAJAX();
static string csv;
[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public JsonResult getAJAX()
{
using (TableEntities context = new TableEntities())
{
stock = (from c in context.stocks
select new stockAJAX
{
StockId = c.StockId,
ProductGroup = c.ProductGroup,
GroupType = c.GroupType,
ItemType = c.ItemType,
Model = c.Model,
SerialNo = c.SerialNo,
NR = c.NR,
Status = c.Status.ToString(),
Description = c.Description,
DateArrived = c.DateArrived.ToString(),
CurrentLocation = c.CurrentLocation,
TerminalId = c.TerminalId,
}
).Take(1000).ToList();
}
return Json(stock, JsonRequestBehavior.AllowGet);
}
and here is my javascript in my View which relates to the DataTable:
var Json = [
{StockId: 0,
ProductGroup: " ",
GroupType: " ",
ItemType: " " ,
Model: " " ,
SerialNo: " ",
NR: " " ,
Status: " ",
Description: " ",
DateArrived: " " ,
CurrentLocation: 0,
TerminalId: " ",
},
];
$("#myTable").DataTable({
"serverSide": true,
"processing": true,
"JQueryUI": true,
"stateSave": true,
"ajax": $.ajax({
contentType: 'application/json; charset=utf-8',
dataType: 'json',
type: 'GET',
url: '/Table/getAJAX',
data: Json,
failure: function() {alert("unavailable AJAX");},
})
});
$('#loading').hide();
$('#myTable').show();
$("#myTable").DataTable().columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
});
and my Datatable here:
<table class="table-fill" id="myTable">
<thead>
<tr>
<th>
<p1>Stock Id</p1>
</th>
<th>
<p1>Product Group</p1>
</th>
<th>
<p1>Group Type</p1>
</th>
<th>
<p1>Item Type</p1>
</th>
<th>
<p1>Model</p1>
</th>
<th>
<p1>Serial No</p1>
</th>
<th>
<p1>NR</p1>
</th>
<th>
<p1>Status</p1>
</th>
<th>
<p1>Description</p1>
</th>
<th>
<p1>Date Arrived</p1>
</th>
<th>
<p1>Current Location</p1>
</th>
<th>
<p1>Terminal ID</p1>
</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Id</th>
<th>Product</th>
<th>Group</th>
<th>Item</th>
<th>Model</th>
<th>Serial</th>
<th>NR</th>
<th>Status</th>
<th>Descr</th>
<th>Date</th>
<th>Location</th>
<th>T-ID</th>
</tr>
</tfoot>
</table>
EDIT:
Here is my Index function in the controller:
[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public ActionResult Index(System.Web.Mvc.FormCollection collection)
{
//DateTime lastMonth = DateTime.Today.AddMonths(-6);
//Recieve Data from the Select Company DropDownList
string selectedList = collection["list"];
//Recieve Data from the Select GroupType DropDownList
string selectedGroupType = collection["grouptype"];
//Recieve Data from the Show All Stock checkbox
string selectedAmount = collection["amount"];
//A list of type <stock> has its value recieved from the function which computes which query to use and then executes it.
returnList(selectedGroupType, selectedList, selectedAmount);
//Returns the view
return View();
}
解决方案
I fixed this by changing how I was defining my DataTable as well as defining my JSON:
[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public JsonResult getAJAX()
{
using (TableEntities context = new TableEntities())
{
stock = (from c in context.stocks
select new stockAJAX
{
StockId = c.StockId,
ProductGroup = c.ProductGroup,
GroupType = c.GroupType,
ItemType = c.ItemType,
Model = c.Model,
SerialNo = c.SerialNo,
NR = c.NR,
Status = c.Status.ToString(),
Description = c.Description,
DateArrived = c.DateArrived.ToString(),
CurrentLocation = c.CurrentLocation,
TerminalId = c.TerminalId,
}
).Take(1000).ToList();
}
return Json(new
{
iTotalRecords = 1000,
iTotalDisplayRecords = 10,
sEcho = 10,
aaData = stock}, JsonRequestBehavior.AllowGet);
}
and my javascript:
$("#myTable").DataTable({
"JQueryUI": true,
"stateSave": true,
"ajax": '/Table/getAJAX',
"columns": [
{ "data": "StockId" },
{ "data": "ProductGroup" },
{ "data": "GroupType" },
{ "data": "ItemType" },
{ "data": "Model" },
{ "data": "SerialNo" },
{ "data": "NR" },
{ "data": "Status" },
{ "data": "Description" },
{ "data": "DateArrived" },
{ "data": "CurrentLocation" },
{ "data": "TerminalId" }
],
});
However when I attempt to query the entire database as below I get a 500 server error, but if I query 1000 entries it works fine.
using (TableEntities context = new TableEntities())
{
stock = (from c in context.stocks
select new stockAJAX
{
StockId = c.StockId,
ProductGroup = c.ProductGroup,
GroupType = c.GroupType,
ItemType = c.ItemType,
Model = c.Model,
SerialNo = c.SerialNo,
NR = c.NR,
Status = c.Status.ToString(),
Description = c.Description,
DateArrived = c.DateArrived.ToString(),
CurrentLocation = c.CurrentLocation,
TerminalId = c.TerminalId,
}
).ToList();
}
这篇关于可数据卡在“处理”初始加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
