如何在数据表mvc c#中显示pageLength过滤器和打印选项

Question

I want print option as well as pageLength filter in datatable working in mvc c# . I search in internet but related to this topic I didnt found anything. Infact in stackoverflow too. So, I am surprise that it is possible or not. If yes then how and if no then why ?

I code for print and for the pageLength filter but it just showing the print option not pageLength filter option and if I remove the print option then it will show the pageLength filter option. Confuse why this happening?

Here is my view code for print and for the pageLength filter

$(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 },                    
        ]
    });
});

And here is my controller,

[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 });
}

Now, this is the code for both print as well as pageLength filter but in output just I get the print option not pageLength option for more clear let see the image of that output

and if I remove the print code from the above code ie

dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'print',
                    exportOptions: {
                        columns: [0, 1, 2]
                    },
                    className: 'btn btn-default btn-xs glyphicon glyphicon-print',
                    footer: true
                }
            ],

then I get the below image result

Please help me to solve this issue.

Thank You.

Answer 1

将dom: 'Bfrtip'替换为dom: 'Blfrtip'