jquery - 如何更新 jqxGrid 页面大小？

Question

我正在使用JqWidgets和自定义 pagerenderer。就像这样：

    // pager customizer method
    var pagerrenderer = function() {
        var element = $("<div style='padding-top: 10px; margin: 0 auto; width: 470px; height: 100%;'></div>");
        var paginginfo = $("#jqxgrid").jqxGrid('getpaginginformation');
        var datainfo = $("#jqxgrid").jqxGrid('getdatainformation');
        var nextPage = paginginfo.pagenum < paginginfo.pagescount - 1 ? paginginfo.pagenum + 1 : paginginfo.pagenum;
        var next = $("<a class='btn btn-small' href='#" + nextPage + "'>Next</a>");
        next.appendTo(element);
        next.click(function () {
            $("#jqxgrid").jqxGrid('gotoprevpage');
        });
        var prevPage = paginginfo.pagenum > 0 ? paginginfo.pagenum - 1 : paginginfo.pagenum;
        var prev = $("<a class='btn btn-small' href='#" + prevPage + "'>Prev</a>");
        prev.appendTo(element);
        prev.click(function () {
            $("#jqxgrid").jqxGrid('gotonextpage');
        });
        var rowsCount = datainfo.rowscount;
        var firstElement = paginginfo.pagenum * paginginfo.pagesize + 1;
        var lastElement = firstElement + paginginfo.pagesize - 1;
        if (lastElement > rowsCount) lastElement = rowsCount;
        $("<span class='info'>" + firstElement + "-" + lastElement + " of " + rowsCount + "</span>").appendTo(element);
        var pageSize = $("<div id='jqxPageSize'></div>");
        pageSize.appendTo(element);
        pageSize.jqxDropDownList({ source: ["10", "20", "30"], selectedIndex: 0, dropDownHeight: '90px', width: '40px', height: '20px', theme: 'firmtel' });
        pageSize.on('change', function (event) {
            var args = event.args;
            var item = args.item;
            $(this).val(item.label);

            // here I am trying to change pagesize of the grid.

            paginginfo.pagesize = item.label;
            $('#jqxGrid').jqxGrid('render');
        });
        $("<span class='info'> Shows rows: </span>").appendTo(element);
        var pageBox = $("<input type='text' name='page-number' style='width: 20px; text-align: right; height: 12px;' />");
        $(pageBox).val(parseInt(paginginfo.pagenum) + 1);
        $(pageBox).keyup(function (event) {
            if (event.keyCode == 13) {
                var val = $(this).val();
                $("#jqxgrid").jqxGrid('gotopage', val - 1);
            }
        });
        pageBox.appendTo(element);
        $("<span class='info'>Go to page: </span>").appendTo(element);

        return element;
    };

如何更改页面大小？

Answer 1

您可以使用

$("#grid").jqxGrid({pagesize:5})

Answer 2

var recordsPerPageDropDown = \创建一个用于放置下拉菜单的div

var sizes = new Array(25, 50, 75);
recordsPerPageDropDown.jqxDropDownList({ width: 100, height: 17, dropDownHeight: 80, placeHolder: "Page size", source: sizes });

recordsPerPageDropDown.on('select', function (event) {
    var args = event.args;
    if (args) {
        var item = args.item;
        var label = item.label;
        $('#jqxgrid').jqxGrid({ pagesize: parseInt(label) });
    }
});

recordsPerPageDropDown.appendTo(element);