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 = \用於放置下拉

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

創建一個div