数据表分页控件不可见

时间:2018-08-06 08:20:05

标签: javascript ajax angular datatables

在使用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调用一个。

这是表格页脚的外观:

Table overview

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

所以,问题是,为什么我看不到分页号码?我想念什么?

0 个答案:

没有答案