我的脚本在这里：
<link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery.dataTables.min.js"></script>
我的Jquery代码就在这里：
$("#myTable").DataTable({
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"aaSorting": [[2, 'asc']],
//"width":540,
"pagingType": "full_numbers",
scrollY: 265,
"lengthChange": false,
"oLanguage": {
"sUrl": "media/language/de_DE.txt",
"sZeroRecords": "There are no records that match your search criterion",
"sLengthMenu": "Display _MENU_ records per page",
"sInfo": "Displaying _START_ to _END_ of _TOTAL_ records",
"sInfoEmpty": "Showing 0 to 0 of 0 records",
"sInfoFiltered": "(filtered from _MAX_ total records)"
},
"ajax": {
"url": "/Home/LoadData",
"type": "POST",
"datatype": "json",
"dataFilter": function(data){
var json = jQuery.parseJSON( data );
json.recordsTotal = json.recordsTotal
json.recordsFiltered = json.recordsFiltered;
json.data = json.data;
return JSON.stringify( json );
}
},
"columns": [
{
"data": " ", "autoWidth": true, 'sortable': false, "mRender":
function (value, AddedOn, mData, type, row) {
return '<input type="checkbox" name="employeeIdsToDelete" id="' + mData.ID + '" class="call-checkbox" value="' + mData.ID + '" />';
}
},
{
"data": "Station", "name": "Station", "autoWidth": true, 'render':
function (Station, mData, type, row) {
return "<a href='/Home/EditEmployee?id=" + type.ID + "' id='modal1' >"+ type.Station +"</a>";
}
},
{
"data": "FlightNo", "name": "Flight No.", "autoWidth": true, 'render':
function (FlightNo, mData, type, row) {
return "<a href='/Home/EditEmployee?id=" + type.ID + "' id='modal1' >" + type.FlightNo + "</a>";
}
},
{
"data": "FlightDate", "name": "FlightDate", "autoWidth": true, "type": "date", "render":
function (value, FlightDate, mData, type, row) {
if (value === null) return "";
var pattern = /Date\(([^)]+)\)/;
var results = pattern.exec(value);
var dt = new Date(parseFloat(results[1]));
//var d = new Date();
var MonthIndex = dt.getMonth();
var monthnames = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
var imonth = monthnames[MonthIndex];
return "<a href='/Home/EditEmployee?id=" + mData.ID + "' id='modal1' >" + dt.getDate() + " " + imonth + " " + dt.getFullYear() + "</a>";
}
},
{
"data": "PaxNo", "name": "No. of Pax", "autoWidth": true, 'render':
function (No_Of_Passengers, mData, type, row) {
return "<a href='/Home/EditEmployee?id=" + type.ID + "' id='modal1' >" + type.No_Of_Passengers + "</a>";
}
},
{
"data": "StatusDescription", "name": "Status", "autoWidth": true, 'render':
function (StatusDescription, mData, type, row) {
return "<a href='/Home/EditEmployee?id=" + type.ID + "' id='modal1' >" + type.StatusDescription + "</a>";
}
},
{
"data": "TextMsg", "name": "LDM", "autoWidth": true, 'render': function (TextMsg, mData, type, row) {
return "<a href='/Home/EditEmployee?id=" + type.ID + "'id='modal1' >" + type.TextMsg + "</a>";
}
},
{
"data": "AddedOn", "name": "AddedOn", "autoWidth": true, "type": "date",
"render": function (value, AddedOn, mData, type, row) {
if (value === null) return "";
var pattern = /Date\(([^)]+)\)/;
var results = pattern.exec(value);
var dt = new Date(parseFloat(results[1]));
//var d = new Date();
var MonthIndex = dt.getMonth();
var monthnames = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
var imonth = monthnames[MonthIndex];
return "<a href='/Home/EditEmployee?id=" + mData.ID + "' id='modal1' >" + dt.getDate() + " " + imonth + " " + dt.getFullYear() + "</a>";
//return (dt.getDate() + " " + imonth + " " + dt.getFullYear());
}
},
{
"data": " ", "autoWidth": true, 'sortable': false,
"mRender": function (value, AddedOn, mData, type, row) {
if (mData.StatusDescription == "Tkt. info. missing")
{
return "<a href='/Home/Ticket?id=" + mData.ID + "' id='modal2' class='btn btn-primary btn' style='background-color:rgb(255,95,1);border-color:rgb(255,95,1);color:white;' >Miss Tkts</a>";
}
else {
return "Completed";
}
}
},
{
"data": " ", "autoWidth": true, 'sortable': false,
"mRender": function (value, AddedOn, mData, type, row) { return '<button class="btn btn-primary btn" style="background-color:rgb(255,95,1);border-color:rgb(255,95,1);color:white;" type="submit" name="Command" value="' + mData.ID + '" > Preview </button>'; }
}
]
});
我的控制器代码就在这里：
[HttpPost]
public ActionResult LoadData()
{
cnUCR cn = new cnUCR();
IEnumerable<usp_FlightsStatusGrid_Result> flightinfo;
int suserid = Convert.ToInt32(Session["ID"]);
flightinfo = cn.usp_FlightsStatusGrid(suserid).Where(x => x.StatusID == 5).ToList();
var idFilter = Convert.ToString(Request["txtStation"]);
// var StationName = Request.Form.GetValues("columns[0][search][value]").FirstOrDefault();
// var FlightNo = Request.Form.GetValues("columns[1][search][value]").FirstOrDefault();
var istatus = Request.Form.GetValues("columns[2][search][value]").FirstOrDefault();
// var Flightdate = Request.Form.GetValues("columns[3][search][value]").FirstOrDefault();
var draw = Request.Form.GetValues("draw").FirstOrDefault();
var start = Request.Form.GetValues("start").FirstOrDefault();
var length = Request.Form.GetValues("length").FirstOrDefault();
var sortColumn = Request.Form.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault() + "][name]").FirstOrDefault();
var sortColumnDir = Request.Form.GetValues("order[0][dir]").FirstOrDefault();
//var contactName = Request.Form.GetValues("columns[0][search][value]").FirstOrDefault();
int pageSize = length != null ? Convert.ToInt32(length) : 0;
int skip = start != null ? Convert.ToInt32(start) : 0;
int recordsTotal = 0;
recordsTotal = flightinfo.Count();
var data = flightinfo.Skip(skip).Take(pageSize).ToList();
return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data }, JsonRequestBehavior.AllowGet);
}
}
当我们运行此项目时，我的数据不会加载到表中并给我一条警告消息 提醒信息在这里： DataTables警告：table id = mytable：Ajax errror。有关此错误的详细信息，请参阅：http://datatales.net/tn/7 本地工作正常，但服务器端出现此错误
答案 0 :(得分：0)
我认为，问题是如何将每列映射到对象字段。 如果返回一个对象数组，则应将每列映射到一个对象字段 列初始化中的“数据”字段应该是属性的名称。
例如，替换：
"data": " ", "autoWidth": true, 'sortable': false,
与
"data": "ID", "autoWidth": true, 'sortable': false,
我想，就像这样：
var arrayOf_flightinfo = [ { "field1": "a", "field2": "b", "field3": "c" },
{ "field1": "d", "field2": "e", "field3": "f" },
{ "field1": "g", "field2": "h", "field3": "i" },
{ "field1": "j", "field2": "k", "field3": "l" }
];
$('#table_FligthInfo').DataTable({
aoColumnDefs: [
{ "aTargets": [0], "name": "field1", "title": "Field 1", "data": "field1" },
{ "aTargets": [1], "name": "field2", "title": "Field 2", "data": "field2" },
{ "aTargets": [2], "name": "field3", "title": "Field 3", "data": "field3" }
],
aaData: arrayOf_flightinfo
});
我在https://github.com/llorentegerman/DataTablesNet上留下了一些关于DataTables和.Net之间集成的例子，也许会对你有帮助。