javascript - 使用 Datatables.net 数据表时,如何判断在分页控件中单击了哪个页码

标签 javascript jquery datatables asp.net-core-mvc asp.net-core-webapi

我有一个 ASP.Net Core 2.1 API,用作我的网站的后端数据存储。返回记录列表的 API 端点接受 PageNumber 和 PageSize 参数,然后返回指定的记录页。

现在,在我的 ASP.Net 2.1 MVC 网站中,我尝试使用 Datatables.net 数据表向用户呈现记录列表。我一切正常,除了当用户单击分页控件中的页码时,我无法弄清楚如何从数据表中获取页码。在我看过的示例中, Controller 有一个 loaddata 操作,并且它正在从 HttpContext.Request.Form 检索值,但我看不到有实际可用的 PageNumber 属性。

这是我 View 中的 javascript;

<script>

    jQuery(document).ready(function ($) {

        var table = $("#companylist").DataTable({
            "processing": true,
            "serverSide": true,
            "filter": true,
            "orderMulti": false,
            "ajax": {
                "url": "/Companies/LoadData",
                "type": "POST",
                "datatype": "json"
            },
            "columnDefs": [
                { "orderable": false, "targets": 7 },
                { "className": "text-center", "targets": [6] },
                {
                    "targets": [2],
                    "createdCell": function(td, cellData, rowData, row, col) {
                        if (cellData) {
                            $(td).html('<i class="far fa-check-circle text-primary""></i>');
                        } else {
                            $(td).html('<i class="far fa-times-circle text-danger""></i>');
                        }
                    }
                }
            ],
            "columns": [
                { "data": "Id", "name": "Id", "autoWidth": true },
                { "data": "CompanyName", "name": "CompanyName", "autoWidth": true },
                { "data": "PrimaryContactName", "name": "PrimaryContactName", "autoWidth": true },
                { "data": "PrimaryContactTitle", "name": "PrimaryContactTitle", "autoWidth": true },
                { "data": "PrimaryContactPhone", "name": "PrimaryContactPhone", "autoWidth": true },
                { "data": "PrimaryContactEmail", "name": "PrimaryContactEmail", "autoWidth": true },
                { "data": "IsEnabled", "name": "IsEnabled", "autoWidth": true },
                {
                    "render": function (data, type, full, meta) { return `<a href="/companies/edit?id=${full.Id}"><i class="far fa-edit text-primary" title="Edit"></a>`; }
                }
            ],
            // From StackOverflow http://stackoverflow.com/a/33377633/1988326 - hides pagination if only 1 page
            "preDrawCallback": function (settings) {
                var api = new $.fn.dataTable.Api(settings);
                var pagination = $(this)
                    .closest('.dataTables_wrapper')
                    .find('.dataTables_paginate');
                pagination.toggle(api.page.info().pages > 1);
            }

        });

    });

这是我的 LoadData Controller 操作;

    public async Task<IActionResult> LoadData()
    {
        try
        {
            await SetCurrentUser();
            ViewData["Role"] = _currentRole;


            var draw = HttpContext.Request.Form["draw"].FirstOrDefault();
            var start = Request.Form["start"].FirstOrDefault();
            var length = Request.Form["length"].FirstOrDefault();
            var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();
            var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault();
            var searchValue = Request.Form["search[value]"].FirstOrDefault();
            var pageSize = length != null ? Convert.ToInt32(length) : 0;

            var request = new CompaniesGetListRequest
            {
                OrderBy = SetOrderBy(sortColumn, sortColumnDirection),
                Filter = SetFilter(searchValue),
                PageNumber = ???, //<--- Where do I get tis value?
                PageSize = pageSize,

            };

            var tokenSource = new CancellationTokenSource();
            var token = tokenSource.Token;

            var companyData = await _client.GetCompanyListAsync(request, "api/companies/filtered", token);

            var recordsTotal = companyData.Paging.TotalCount;
            var data = companyData.Companies.ToList();
            return Json(new
            {
                draw = draw,
                recordsFiltered = companyData.Paging.TotalCount,
                recordsTotal = companyData.Paging.TotalCount,
                data = companyData.Companies.ToList()
            });

        }
        catch (Exception ex)
        {
            const string message = "An exception has occurred trying to get the list of Company records.";
            _logger.LogError(ex, message);
            throw;
        }
    }

看起来我只有起始值(列表中的下一个记录编号)和长度(页面大小)。我需要确定页码,因为由于数据集的大小,我不想从后端数据存储返回整个数据集。我只想一次抓取一页。

这可能是一个简单的问题,但我只是没有运气找到答案。

最佳答案

我从数据表论坛得到了这个答案。

var page = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;

希望这有帮助。

PS:Link to Forum

关于javascript - 使用 Datatables.net 数据表时,如何判断在分页控件中单击了哪个页码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52770564/

相关文章:

javascript - 如何从云Firestore中提取非重复文档?

javascript - 使用 javascript 弹出窗口在 PHP 中上传 Ajax 文件

jquery - 在数据表中保存/恢复搜索值

javascript - 使用 javascript/css 将 64 位字符串转换为 jpeg

javascript - 在 Webpack 4 中,我们可以使用 import() token 动态生成页面 block ,以便我们可以将 react 组件转换为可 react 加载的组件吗?

javascript - 无法在 jquery 窗口中显示评论

javascript - 如何使用 jQuery GalleryView 插件删除它们?

jquery - IE旋转离轴

jquery dataTable 改变页面

javascript - 带 JS 源的数据表