提问人:Taha İbrahim Orhan 提问时间:10/13/2023 更新时间:10/13/2023 访问量:25
Jquery 数据表服务器端分页
Jquery Datatable serverSide pagination
问:
我的问题是我的jQuery数据表打开得很慢。我的场景如下。我有一个过滤屏幕,在进行必要的过滤后,我的结果页面打开,并带有“查看结果”按钮。在此按钮中,我通过提交 <form> 标签来获取所需的数据。我的表总共包含 87 列和 1207 个数据。不幸的是,对于这些值,打开时间总共需要 15-16 秒。我想做服务器端分页,但我的方法在.net核心端的返回类型是return View(“Result”, result)。如果我分享我的代码,如果有经验的朋友能回答我可以做出哪些改变,我会很高兴。快乐论坛:)
public IActionResult FastFiltering(FastFilteringRequest model)
{
try
{
var fastFilteringParameters = _mapper.Map<FastFilteringDto>(model);
List<FundAndDistributionCombinationDto> result = new List<FundAndDistributionCombinationDto>();
result = _fundService.FastFiltering(fastFilteringParameters, userId).ToList();
foreach (var fund in result)
{
fund.FundValue.DailyReturn = fund.FundValue.DailyReturn.Value < 1 && fund.FundValue.DailyReturn > -1 ? GetFirstDigitNonZeroDecimal((decimal)fund.FundValue.DailyReturn) : decimal.Parse(fund.FundValue.DailyReturn.Value.ToString("0.00"));
fund.FundValue.WeeklyReturn = fund.FundValue.WeeklyReturn.Value < 1 &&
}
int pageSize = 0;
var draw = Convert.ToInt32(Request.Form["draw"].FirstOrDefault() ?? "0");,
var start = Request.Form["start"].FirstOrDefault() ?? "0";
var length = Request.Form["length"].FirstOrDefault() ?? "10";
var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();
var sortColumnDir = Request.Form["order[0][dir]"].FirstOrDefault();
var searchValue = Request.Form["search[value]"].FirstOrDefault();
pageSize = length !=null ? Convert.ToInt32(length) : 0;
int skip = start !=null ? Convert.ToInt32(start) : 0;
var data = (from resultPagingData in result select resultPagingData);
if(!string.IsNullOrEmpty(sortColumn) && !string.IsNullOrEmpty(sortColumnDir))
{
data = data.AsQueryable().OrderBy(sortColumn + "" + sortColumnDir);
}
int totalRecord = data.Count();
var cData = data.Skip(skip).Take(pageSize).ToList();
var settings = new JsonSerializerSettings
{
ReferenceLoopHandling = ReferenceLoopHandling.Ignore
};
var jsonData = JsonConvert.SerializeObject(new
{
draw = draw,
recordsFiltered = totalRecord,
recordsTotal = totalRecord,
data = cData
}, settings);
return Content(jsonData, "application/json");
}
catch (Exception ex)
{
throw ex;
}
}
这是我的 C# 代码
var codeListTable = $('#' + tableId).DataTable({
stateSave: true,
"processing": true,
"serverSide": true,
data:jsonData,
"ajax": {
"type": "POST",
"url": '/Fund/FastFiltering',
"dataType": 'json',
"data": function (d) {
d.customData = "Özelleştirilmiş Veri"; // İstekle sunucuya özel veri göndermek istiyorsanız kullanabilirsiniz
}
},
colReorder: {
fixedColumnsLeft: 4,
fixedColumnsRight: 1,
},
fixedColumns: {
left: 1
},
stateSaveCallback: function (settings, data) {
$("#" + tableId).parent().addClass("scrollbar-custom");
searchSetValue(codeListTable);
var columnOrder = codeListTable.colReorder.order();
data.ColReorder = columnOrder;
var columnOrderData = data.ColReorder;
var columnFilter = codeListTable.columns().visible();
var colVisState = $.map(columnFilter, function (col, i) {
return col ? true : false;
});
var newColVisState = [];
for (var i = 0; i < columnOrderData.length; i++) {
var index = columnOrderData[i];
newColVisState[index] = colVisState[i];
}
$.ajax({
type: 'POST',
url: '@Url.Action("DataTableVisibilityCustomization", "Fund")',
data: { FilterColumnStatus: JSON.stringify(newColVisState), FilterColumnOrder: JSON.stringify(columnOrderData)},
success: function (result) {
}
});
},
stateLoadCallback: function (settings, callback) {
$.ajax({
type: 'POST',
url: '@Url.Action("GetDataTableColumnVisibility", "Fund")',
success: function (result) {
if (result.data) {
var filterColumns = JSON.parse(eval(result.data)[0]);
if (filterColumns != null) {
$('#' + tableId + ' th').each(function (index) {
var column = filterColumns[index];
if (column === false) {
settings.aoColumns[index].bVisible = false;
}
});
}
} else {
for (var i = 0; i <= 87; i++) {
settings.aoColumns[i].bVisible = [0, 1, 2, 3, 4, 87].includes(i);
}
}
if (result.order) {
var columnOrderData = JSON.parse(result.order);
}
callback();
codeListTable.colReorder.order(columnOrderData);
codeListTable.draw();
codeListTable.buttons().container().appendTo('.tableActions');
}
});
},
autoWidth: false,
columnDefs: [
{ "data": "Code", "name": "fundCode", "width": "0.2%", "targets": 0 },
{ "data": "FundDtoValue.Name", "name": "fundName", "targets": 1 },
{ "data": "FundDtoValue.subCategoryDto.mainCategoryDto.Name", "name": "fundCategory", "targets": 2 },
{ "data": "FundDtoValue.subCategoryDto.Name", "name": "fundSubCategory", "targets": 3 },
.... Continue
{
type: 'turkish-numeric-comma',
targets: [4, 5, 6, 7 ...Continue]
},
{ bSortable: false, aTargets: [87] }
],
这是我的Jquery数据表渲染代码
我可以将数据作为 json 返回并像以前一样打开结果页面,并在我的 jquery 数据表中使用 json 数据。
答: 暂无答案
评论