Я реализовал обработку на стороне сервера для таблицы данных jquery. Существует функция, которая работает нормально для «Обработки на стороне клиента», но не работает, если реализована с помощью «Обработки на стороне сервера».
Моя проблема заключается в переходе с одной страницы на другую в таблице данных jquery. , если есть какие-либо изменения (в текстовом поле / раскрывающемся списке в любой ячейке), отобразите сообщение об ошибке и не переходите на следующую страницу.
Я могу достичь этого сценария выше,используя клиентскую сторону. Но не в состоянии сделать на стороне сервера.
На стороне клиента я реализовал так
(document).ready(function () {
var isSuperUser = '@isUserSuperAdmin';
var oTable = $('#tblnotreportingdetails').dataTable(
{
dom: 'Bfrtip',
oLanguage: {
sSearch: '<i class="fa fa-search"> </i>'
},
iDisplayLength: 7,
buttons: [
{
extend: 'copy',
text: '<i class="fa fa-files-o fa-2x" style="color: green;"></i>',
titleAttr: 'Copy',
exportOptions: {
columns: "thead th:not(.noExport)"
}
},
{
extend: 'excel',
text: '<i class="fa fa-file-excel-o fa-2x" style="color: green;"></i>',
titleAttr: 'Excel',
exportOptions: {
columns: "thead th:not(.noExport)"
}
},
{
extend: 'csv',
text: '<i class="fa fa-file-text-o fa-2x" style="color: green;"></i>',
titleAttr: 'CSV',
exportOptions: {
columns: "thead th:not(.noExport)"
}
},
{
extend: 'pdf',
text: '<i class="fa fa-file-pdf-o fa-2x" style="color: green;"></i>',
titleAttr: 'PDF',
exportOptions: {
columns: "thead th:not(.noExport)"
}
},
{
extend: 'print',
text: '<i class="fa fa-print fa-2x" style="color: green;"></i>',
titleAttr: 'Print',
exportOptions: {
columns: "thead th:not(.noExport)"
}
}]
});
//Function to alert the user to save information on navigating to the next page through Pagination
$('#tblnotreportingdetails').on('page.dt', function () {
var selectedReasonKeyArr = [];
//Getting the current page visible rows (10 rows/20 rows/50 rows/100 rows - default is 10 rows)
var rows = $("#tblnotreportingdetails tbody tr");
for (var index = 0; index < rows.length; index++) {
//Getting each row
var singleRow = $(rows[index]);
//Get the Reason Dropdown selected value
var selectedReasonKey = singleRow.find(":selected").val();
var selectedReasonText = singleRow.find(":selected").text();
var existingReasonText = $.trim(singleRow.find('td').eq(9).html());
//If the selected value is not empty (is empty only when the text is "--Select--")
if (selectedReasonKey != "") {
existingReasonText = decodeEntities(existingReasonText);
if (selectedReasonText != existingReasonText) { //Add to the Array
//alert("existingReasonText : " + existingReasonText + "selectedReasonText : " + selectedReasonText);
selectedReasonKeyArr.push(selectedReasonKey);
}
}
}
//Check if the Array length is more than 0 then display message
if (selectedReasonKeyArr.length > 0) {
// alert("Please save unsaved Data before Navigating to the next Page.");
var existingErrMessage = $('#divNrpErrorMessage').text();
if (existingErrMessage.indexOf("Please save unsaved Data before Navigating to the next Page.") == -1) {
var newErrorMessage = existingErrMessage + " Please save unsaved Data before Navigating to the next Page.";
$('#divNrpErrorMessage').text(newErrorMessage);
}
//Finding the first row of the selected page and staying on the same page by using the below extension method
oTable.fnGetPageOfRow(rows[0]);
}
else {
$('#divNrpErrorMessage').text('');
$('#divNrpSuccessMessage').text('');
}
});
});
На стороне клиента я могу легко сделать это с помощью метода расширенияoTable.fnGetPageOfRow(rows[0]);
Для обработки на стороне сервера мой код, как показано ниже
[HttpPost, OutputCache(Duration = 0, NoStore = true)]
public JsonResult LoadNotReportingDataTable()
{
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 search = Request.Form.GetValues("search[value]").FirstOrDefault().ToLower();
int pageSize = length != null ? Convert.ToInt32(length) : 0;
int skip = start != null ? Convert.ToInt32(start) : 0;
int totalRecord = 0;
int filteredRecord = 0;
var assetsNotReportingModelList = new List<AssetsNotReportingModel>();
var result = GetAssetsByNotReportingReasonWiseCountDts(15, "0", "0", "0", "0", "0", "0", "0", "0", "NR").ToList();
assetsNotReportingModelList.AddRange(result);
//Assign the totalrecord for jquery datatable - server side processing
totalRecord = assetsNotReportingModelList != null ? assetsNotReportingModelList.Count() : totalRecord;
var v = (from item in assetsNotReportingModelList select item);
if (!(string.IsNullOrEmpty(sortColumn) && !(string.IsNullOrEmpty(sortColumnDir))))
{
v = v.OrderBy(sortColumn + " " + sortColumnDir);
}
filteredRecord = v.ToList().Count();
var data = pageSize == -1 ? v.ToList() : v.Skip(skip).Take(pageSize).ToList();
JsonResult json = Json(new
{
draw = draw,
recordsFilterd = filteredRecord,
recordsTotal = totalRecord,
iTotalRecords = totalRecord,
iTotalDisplayRecords = filteredRecord,
data = data
}, JsonRequestBehavior.AllowGet);
json.MaxJsonLength = int.MaxValue;
return json;
}
Обработка на стороне сервера - код Javascript здесь
var prestart = 0;
var prepaginationval = 1;
$(document).ready(function () {
var isSuperUser = '@isUserSuperAdmin';
var notReportingPaginationArr = [];
var oTable = $('#tblnotreportingdetails').dataTable({
"ajax": {
"url": "@Url.Action("LoadNotReportingDataTable", "Home")",
"type": "POST",
"datatype": "json",
"headers": headers,
"beforeSend": function (xhr, opts) {
//debugger;
//if any changes available in the current page(reason/remark) tnen get the current page number and assign to the global variable
if (notReportingPaginationArr.length > 0) {
prepaginationval = $('#tblnotreportingdetails_wrapper').find('.dataTables_paginate').find('ul.pagination').find('li.active a').attr("data-dt-idx");
//alert('pervious page no : ' + prepaginationval);
}
},
"data": function (d) {
d.nrp = JSON.stringify(notReportingPaginationArr);
d.prestart = prestart;
return d;
},
},
"dom": 'Bftrip',
"oLanguage": {
"sSearch": '<i class="fa fa-search"> </i>'
},
"paging": true,
"pagingType": "full_numbers",
"pageLength": 7,
"serverSide": true,
"processing": true,
"language": {
"loadingRecords": " ",
'processing': "<i id='processingIcon' class='fa fa-cog fa-spin fa-2x'></i>"
},
"columns": [
{
"title": "Asset Code", "data": "Asset_ID", "name": "Asset_ID", "visible": true, "searchable": true, "sortable": true, "class": "text-left-align",
"render": function (data, type, full, meta) {
var oemkeycontrol = '<input type="hidden" name="OEM_Key" id="hdnOEM_Key" value="' + full.OEM_Key + '" />';
var assetidcontrol = '<input type="hidden" name="Asset_ID" id="hdnAsset_ID" value="' + data + '" />';
var companycodecontrol = '<input type="hidden" name="CompanyCode" id="hdnCompanyCode" value="' + full.CompanyCode + '" />';
var notreportingreasontypecontrol = '<input type="hidden" name="NotReportingReasonType" value="' + full.NotReportingReasonType + '" />';
var assetoverviewcontrol = full.IsForAssetOverview == "Y" ? '<a title="Click to view Asset Overview" style="cursor: pointer;font-size: 14px;font-weight: bold;color:#3884c7 !important" data_toggle="tooltip" id="' + data
+ '" onclick=moveToAssetOverviewFromNotReporting("' + data + '","' + full.CompanyCode + '","' + full.OEM_Key + '","' + full.NotReportingReasonType + '")>' + data + '</a>'
: '<a title="EMS Asset" data_toggle="tooltip" id="' + data + '" class="disabled">' + data + '</a>';
return oemkeycontrol + assetidcontrol + companycodecontrol + notreportingreasontypecontrol + assetoverviewcontrol;
}
},
{
"title": "Asset Description", "data": "Asset_Name", "name": "Asset_Name", "visible": true, "searchable": true, "sortable": true, "class": "text-left-align"
},
{
"title": "IC", "data": "ICShortCode", "name": "ICShortCode", "visible": true, "searchable": true, "sortable": true, "class": "text-center"
},
{
"title": "Job Code", "data": "Job_Code", "name": "Job_Code", "visible": true, "searchable": true, "sortable": true, "class": "text-left-align"
},
{
"title": "Job Description", "data": "Job_Desc", "name": "Job_Desc", "visible": true, "searchable": true, "sortable": true, "class": "text-left-align"
},
{
"title": "Last Reported Time", "data": "Date", "name": "Date", "visible": true, "searchable": true, "sortable": true, "class": "text-left-align"
},
{
"title": "Days Not Reported", "data": "NotReportingAge", "name": "NotReportingAge", "visible": true, "searchable": true, "sortable": true, "class": "text-center",
"render": function (data, type, full, meta) {
if (data != null) {
var notreportingagecontrol = '<a title="Click to view History" style="cursor: pointer;font-size: 14px;font-weight: bold;color:#3884c7 !important" data_toggle="tooltip" ' +
'id="ancNotReportingAge" onclick="displayNotReportingReasonHistoryPopUp(\'' + full.Asset_ID + '\',\'' + full.Asset_Name + '\',\'' + full.CompanyCode + '\',\'' + full.OEM_Key + '\');">' + data + '</a>';
return notreportingagecontrol;
}
}
},
{
"title": "Days Not Reported with Current Reason", "data": "CurrentNotReportingReasonAge", "name": "CurrentNotReportingReasonAge", "visible": true, "searchable": true, "sortable": true, "class": "text-center"
},
{
"title": "Reason", "data": "_ReasonKey", "name": "_ReasonKey", "visible": true, "searchable": false, "sortable": false, "className": "noExport",
"render": function (data, type, full, meta) {
var $select = $("<select class = 'form-control', style = 'font-size:11px;width: 150px;'></select>", { "id": "drpReason", "value": data });
var $defaultoption = $("<option></option>", { "text": "--Select--", "value": "" });
$select.append($defaultoption);
$.each(full.NotReportingReason, function (k, v) {
var $option = $("<option></option>", { "text": v.Text, "value": v.Value });
if (data == v.Value) { $option.attr("selected", "selected") }
$select.append($option);
});
return $select.prop("outerHTML");
}
},
{
"title": "_Reason", "data": "_Reason", "name": "_Reason", "visible": false, "searchable": true, "sortable": false, "class": "text-left-align"
},
{
"title": "Reason Created By", "data": "ReasonCreatedBy", "name": "ReasonCreatedBy", "visible": true, "searchable": true, "sortable": true, "class": "text-left-align"
},
{
"title": "Reason Updated By", "data": "ReasonUpdatedBy", "name": "ReasonUpdatedBy", "visible": true, "searchable": true, "sortable": true, "class": "text-left-align"
},
{
"title": "Remarks", "data": "Remarks", "name": "Remark", "visible": true, "searchable": true, "sortable": true, "data-orderable": false, "class": "text-center",
"render": function (data, type, full, meta) {
var remarkcontrol = '<textarea id="txtRemarks" class="form-control" style="font-size:11px;width: 150px;" title="' + full.RemarkEnteredOnDate + '">' + data + '</textarea>';
return remarkcontrol;
}
},
//{
// "data": "Remarks", "name": "Remarks", "visible": false, "searchable": false, "sortable": false, "class": "text-left-align"
//},
{
"title": "Reason & Remark History", "data": "", "name": "Reason&RemarkHistory", "visible": true, "searchable": false, "sortable": false, "data-orderable":false, "class": "text-center noExport",
"render": function (data, type, full, meta) {
if (full._ReasonKey && full._ReasonKey != -1) {
return '<a class="btn btn-xs mybtn-info cursorpointer display-mode" onclick="displayNrReasonAndRemarkHistoryPopUp(\'' + full.Asset_ID + '\',\'' + full.Asset_Name + '\',\'' + full.CompanyCode + '\',\'' + full.OEM_Key + '\')" '
+ 'data-title="Click to view Reason & Remarks History" title="Click to view Reason & Remarks History" data-toggle="tooltip">'
+ '<i class="fa fa-history" title="Click to view Reason & Remarks History" style="padding:5px; font-size:17px;"></i></a>';
} else {
return '<a class="btn btn-xs mybtn-info cursorpointer display-mode" title="No Reason & Remarks History Available" data-toggle="tooltip" disabled>'
+ '<i class="fa fa-history" title="No Reason & Remarks History Available" style="padding:5px; font-size:17px;"></i></a>';
}
}
},
{
"title": "Source/OEM Provider", "data": "OEM_Provider", "name": "OEM_Provider", "visible": true, "searchable": true, "sortable": true, "class": "text-center"
},
{
"title": "Location Details", "data": "", "searchable": false, "sortable": false, "class": "text-center noExport",
"render": function (data, type, full, meta) {
return '<a class="cursorpointer mapmarkercolor dialog" id="btnMap" onclick="getAssetMap(this,\'' + full.Asset_ID + '\',\'' + full.Asset_Name + '\',\'' + full.CompanyCode + '\',\'' + full.OEM_Key + '\',\'Last\')" '
+ 'data-toggle="tooltip" title="Last known location" name="' + full.Asset_Name + '" style="font-size:2.5em;color:deepskyblue;"> <span class="icon-Map-Marker"></span></a>';
}
}
],
"columnDefs": [
{
"targets": 5,
render: function (data) {
if (data != null)
return moment(data).format('DD-MMM-YYYY HH:mm:ss A');
else
return '';
}
}
],
"fnDrawCallback": function (oSettings) {
},
"initComplete": function (settings, json) {
}
});
//Function to alert the user to save information on navigating to the next page through Pagination
oTable.on('page.dt', function (e, oSettings) {
e.preventDefault();
var selectedReasonKeyArr = [];
notReportingPaginationArr.length = 0;
//Getting the current page visible rows (10 rows/20 rows/50 rows/100 rows - default is 10 rows)
var rows = $("#tblnotreportingdetails tbody tr");
for (var index = 0; index < rows.length; index++) {
//Getting each row
var singleRow = $(rows[index]);
//Get the Reason Dropdown selected value
var selectedAssetId = singleRow.find("#hdnAsset_ID").val();
var selectedCompanyCode = singleRow.find("#hdnCompanyCode").val();
var selectedOemKey = singleRow.find("#hdnOEM_Key").val();
var selectedReasonKey = singleRow.find(":selected").val();
var selectedReasonText = singleRow.find(":selected").text();
var selectedRemarkText = singleRow.find("#txtRemarks").text();
var data = oTable.api().row(singleRow).data();
var existingReasonText = $.trim(data["_Reason"]);
//If the selected value is not empty (is empty only when the text is "--Select--")
if (selectedReasonKey != "") {
existingReasonText = decodeEntities(existingReasonText);
if (selectedReasonText != existingReasonText) { //Add to the Array
//alert("existingReasonText : " + existingReasonText + "selectedReasonText : " + selectedReasonText);
selectedReasonKeyArr.push(selectedReasonKey);
notReportingPaginationArr.push(
{
"Asset_ID": selectedAssetId,
"CompanyCode": selectedCompanyCode,
"OEM_Key": selectedOemKey,
"NewReasonKey": selectedReasonKey,
"NewReasonText": selectedReasonText,
"NewRemarkText": selectedRemarkText
});
}
}
}
//Check if the Array length is more than 0 then display message
if (selectedReasonKeyArr.length > 0) {
// alert("Please save unsaved Data before Navigating to the next Page.");
var existingErrMessage = $('#divNrpErrorMessage').text();
if (existingErrMessage.indexOf("Please save unsaved Data before Navigating to the next Page.") == -1) {
var newErrorMessage = existingErrMessage + " Please save unsaved Data before Navigating to the next Page.";
$('#divNrpErrorMessage').text(newErrorMessage);
}
debugger;
var p = oTable.api().page.info();
prestart = p.start > 6 ? (p.start - p.length) : p.start;
oTable.api().draw(false);
//var data = oTable.row(rows[0]).data();
//Finding the first row of the selected page and staying on the same page by using the below extention method
//oTable.fnGetPageOfRow(rows[0]);
//oTable.row(rows[0]).data(data).draw(false);
//var p = oTable.api().page.info();
//oTable.fnClearTable();
//for (var i = 0; i < rows.length; i++) {
// oTable.fnAddData($(rows[i]));
//}
//oTable.page(p.page).draw('page');
//oTable.ajax.reload(null, false);
//oTable.draw(false);
//oTable.fnPageChange(0, true);
//oTable.settings()[0].oFeatures.bServerSide = false;
//oTable.settings()[0].ajax = false;
}
else {
$('#divNrpErrorMessage').text('');
$('#divNrpSuccessMessage').text('');
}
});
});
Но на стороне сервера, как это сделать?
Пожалуйста, помогите.