首页 > 解决方案 > 数据表分页控件不可见

问题描述

当我使用 Angular 时,我在 Angular document.ready 函数中进行了数据表初始化,如下所示:

angular.element(document).ready(function () {
    var table = $('#orders-table1').DataTable({
        "order": [[0, "desc"]],
        "processing": true,
        "serverSide": true,
        "paging": true,
        "ajax": {
            "url": "/Administration/GetOrders",
            "type": "POST",
            "datatype": "json",
            "success": function (data) {
                var datastring = JSON.stringify(data);

                $.ajax({
                    type: 'POST',
                    url: '/Administration/GetOrderRowPartialView',
                    data: {
                        objekt: datastring
                    },
                    cache: false,
                    success: function (data) {
                        $("#orders-table1-body").html($compile(data)($scope)); //the data is the partial view containing many partial views
                    },
                    error: function (xhr, status, error) {
                        alert(xhr.responseText);
                    }
                });
            }
        }
    });
});

代码说明:

加载页面时,表初始化从serverSide属性设置为 true 开始。第一个 ajax 调用调用控制器操作并获取 json 格式的数据。

考虑到表中的每一行都必须是局部视图(Razor、ASP.NET),我创建了一个包含许多局部视图(行)的局部视图(行集合)。

所以,这就是我有另一个 Ajax 调用的原因。从前一个接收数据并创建包含许多部分视图(行)的部分视图(行集合)并将其呈现在表体中的部分。

一切正常,除了我没有看到分页数。

这是服务器端代码,两个控制器操作:

[Authorize(Roles = "Administrator")]
[HttpPost]
public ActionResult GetOrders()
{
    INarudzbeBL INarudzbeBL = BLFactory.KreirajInstancuNarudzba<INarudzbeBL>();
    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();

    int pageSize = length != null ? Convert.ToInt32(length) : 0;
    int skip = start != null ? Convert.ToInt32(start) : 0;
    int totalRecords = 0;

    var narudzbe = INarudzbeBL.DohvatiSveNarudzbe();

    totalRecords = narudzbe.Count();
    var data = narudzbe.Skip(skip).Take(pageSize).ToList();

    NarudzbaToCustomNarudzbaMapper narudzbaToCustomNarudzbaMapper = new NarudzbaToCustomNarudzbaMapper();
    List<TP1.CustomMappers.AdministrationOrders.NarudzbaCustomViewModel> narudzbaCustomViewModels = narudzbaToCustomNarudzbaMapper.MapNarudzbaToCustomNarudzba(data);

    NarudzbaCustomViewModelHolder narudzbaCustomViewModelHolder = new NarudzbaCustomViewModelHolder();
    narudzbaCustomViewModelHolder.NarudzbaCustomViewModels = narudzbaCustomViewModels;

    return Json(narudzbaCustomViewModelHolder);
}

[Authorize(Roles = "Administrator")]
[HttpPost]
public ActionResult GetOrderRowPartialView(string objekt)
{
    NarudzbaCustomViewModelHolder narudzbaCustomViewModelHolder = JsonConvert.DeserializeObject<NarudzbaCustomViewModelHolder>(objekt);

    return PartialView("~/Views/Administration/Partial/Orders/OrdersTablePartialView.cshtml", narudzbaCustomViewModelHolder.NarudzbaCustomViewModels);
}

第一个用于获取 JSON 格式的数据,第二个用于使用接收到的数据创建一个局部视图,每个 ajax 调用一个。

这是表格页脚的样子:

表格概览

我已经包含了必要的脚本和样式文件。

所以,问题是,为什么我看不到分页数?我错过了什么?

标签: javascriptajaxangulardatatables

解决方案


推荐阅读