如何在datatable MVC C#中显示pageLength过滤器和打印选项

时间:2019-03-05 15:16:06

标签: c# jquery asp.net-mvc datatable

我想要在MVC C#中工作的数据表中的打印选项以及pageLength过滤器。我在互联网上搜索,但与此主题相关的我什么也没找到。同样影响stackoverflow。因此,我很惊讶是否有可能。如果,则如何,如果不是,则为什么

我为打印和pageLength过滤器编码,但它仅显示打印选项而不是pageLength过滤器选项,如果我删除打印选项,则它将显示pageLength过滤器选项。混淆为什么会这样?

这是我的打印和pageLength过滤器的视图代码

exports.updateLeaderboard = functions.database.ref('/contests/{dateString}/ladder/dayIsComplete').onWrite((event, context) => {
    const isComplete = event.after._data,
        contestType = 'ladder',
        dateString = context.params.dateString;

    if (isComplete !== true) {
        console.warn(`${contestType} for ${dateString} is not yet complete.`);

        return false;
    }

    return new Promise((resolve, reject) => {
        async.auto({
            fetchWinningPicks: cb => {
                return cb();
            },

            // ... Other stuff that I've now commented out

        }, err => {
            if (err) {
                reject();
            } else {
                resolve();
            }
        });
    });
};

这是我的控制器,

$(document).ready(function () {
    // DataTable
    var table = $("#dataGrid").DataTable({
        //Report Export Start
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'print',
                exportOptions: {
                    columns: [0, 1, 2]
                },
                className: 'btn btn-default btn-xs glyphicon glyphicon-print',
                footer: true
            }
        ],
        //Report Export End

        "scrollX": false,  // scrolling horizontal
        "bSort": false,
        "bFilter": false,
        "processing": true, // for show progress bar
        "serverSide": true, // for process server side
        "filter": true, // this is for disable filter (search box)
        //"orderMulti": false, // for disable multiple column at once
        "pageLength": 5,
        "lengthMenu": [5, 10, 50, 100, 1000, 10000],

        "ajax": {
            "url": "/Ledger/LedgerList",
            "type": "POST",
            "datatype": "json",
            "data": function (d) {
                return $.extend({}, d, {
                    'SearchLedgerType': document.getElementById("search_ledgerType").value                        
                });
            }
        },

        "columnDefs":
            [{
                "targets": [2, 3],
                "visible": false,
                "searchable": true,
                "orderable": false
            }
            ],
        "columns": [
            { "data": "id", "name": "Id", "autoWidth": true },
            { "data": "name", "name": "Name", "autoWidth": true },
            { "data": "address", "name": "Address", "autoWidth": true },                    
        ]
    });
});

现在,这是用于打印以及pageLength过滤器的代码,但是在输出中,我得到的是print选项而不是pageLength选项,以便更清楚地让我们看到该输出的图像

enter image description here

,如果我从以上代码中删除了打印代码,即

[HttpPost]
public IActionResult LedgerList(Ledger ledger)
{
    var draw = Request.Form["draw"];
    var start = Request.Form["start"].ToString();
    var length = Request.Form["length"].ToString();
    var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"] + "][name]"];
    var sortColumnDir = Request.Form["order[0][dir]"];
    var searchValue = Request.Form["search[value]"];

    //Paging Size (10,20,50,100)    
    int pageSize = length != null ? Convert.ToInt32(length) : 0;
    int skip = start != null ? Convert.ToInt32(start) : 0;
    int recordsTotal = 0;

    // Getting all Customer data    
    var dataList = (from l in _Db.Ledger
                    select new Ledger
                    {
                        Id=l.Id,
                        Name = l.Name,
                        Address = l.Address,
                    }).ToList();

    // filter data
    if (ledger.SearchLedgerType != null)
        dataList = dataList.Where(d => d.LedgerType.Trim() == ((LedgerType)Convert.ToInt32(ledger.SearchLedgerType)).ToString()).ToList();

    //Sorting    
    if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDir)))
    {
        var propertyInfo = typeof(Ledger).GetProperty(sortColumn);
        if (propertyInfo != null)
        {
            if (sortColumnDir == "asc")
                dataList = dataList.OrderBy(x => propertyInfo.GetValue(x, null)).ToList();
            else
                dataList = dataList.OrderByDescending(x => propertyInfo.GetValue(x, null)).ToList();
        }
    }

    //Search    
    if (!string.IsNullOrEmpty(searchValue))
        dataList = dataList.Where(m => m.Name.ToLower().Contains(searchValue.ToString().ToLower())).ToList();

    //total number of rows count     
    recordsTotal = dataList.Count();

    //Paging     
    var data = dataList.Skip(skip).Take(pageSize).ToList();

    //Returning Json Data
    return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data });
}

然后我得到下面的图像结果

enter image description here

请帮助我解决此问题。

谢谢。

1 个答案:

答案 0 :(得分:0)

dom: 'Bfrtip'替换dom: 'Blfrtip'