Jquery 数据表服务器端分页

Jquery Datatable serverSide pagination

提问人:Taha İbrahim Orhan 提问时间:10/13/2023 更新时间:10/13/2023 访问量:25

问:

我的问题是我的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 数据。

javascript c# .net jquery-datatables-editor

评论


答: 暂无答案