Question

它在jqgrid文档中指出，下面的代码应允许使用服务器端分页进行本地排序; 网格数据在分页时消失;之前已经问过这个问题没有明确的答案 - 建议使用loadonce：true表示分页已关闭 - 我需要分页

稍后编辑以显示完整的html页面和json响应（我现在从php / mysql后端运行它。）

我的完整HTML页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQGrid Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../dojoproject/jquery-ui-1.8.16.custom/css/start/jquery-ui-1.8.16.custom.css">
<link rel="stylesheet" type="text/css" href="jquery.jqGrid-4.3.1/css/ui.jqgrid.css">
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    font-size: 90%;
}
</style>
<script type="text/javascript" src="../dojoproject/jquery-ui-1.8.16.custom/js/jquery-1.6.2.min.js" ></script>
<script type="text/javascript" src="../dojoproject/jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js" ></script>
<script type="text/javascript" src="jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js" ></script>
<script type="text/javascript" src="jquery.jqGrid-4.3.1/js/jquery.jqGrid.min.js" ></script>
<script type="text/javascript" src="../dojoproject/jqGrid-4.1.2/js/JSON-js/json2.js" ></script>

<script>

 $(function() {
$('#table').jqGrid({
   jsonReader : {
    repeatitems: false,
    cell:"",
    id:"0"
   },   
    height:'auto',
    url:'/jqgrid/orderdetails.php',
    postData:{test:'value'},
    datatype: 'json',
    mtype: 'POST',
    rownumbers:true,
    rownumWidth:35,
    colNames:['OrderID','UnitPrice','Quantity','Discount','ProductName'],
    colModel :[ 
      {name:'OrderID', index:'OrderID',search:false,sorttype:'integer'}, 
      {name:'UnitPrice', index:'UnitPrice',editable:true,sorttype:'float'}, 
      {name:'Quantity', index:'Quantity',sorttype:'int'}, 
      {name:'Discount', index:'Discount',sorttype:'int'},
      {name:'ProductName', index:'ProductName'}   
    ],
    sortname: 'OrderID ',
    rowNum:5,
    sortorder: 'asc',
    width:'100%',
    height:'200',
    viewrecords: true,
    gridview: true,
    caption: 'NorthWind Orders',
    scrollOffset:18,
    multiselect:true,
    pager:'pager'
    ,cellEdit:true,
    cellsubmit:'clientArray',
    afterSaveCell:function(rowid, cellname, value, iRow, iCol){
    },
       onPaging: function() {
        $("#table").setGridParam({datatype:'json'}).trigger("reloadGrid");
        },               
    loadComplete: function (data) {  
        $("#table").setGridParam({datatype:'local'}).trigger("reloadGrid");
        } 
    });
 });

</script>

</head>
<body>

<table id='table'></table>
<div id='pager'></div>
</body>
</html>

第一次加载时的响应是

{"page":"1","total":431,"records":2155,"rows":[{"OrderID":"1024811","UnitPrice":"14.0000","Quantity":"12","Discount":"0"},{"OrderID":"1024842","UnitPrice":"9.8000","Quantity":"10","Discount":"0"},{"OrderID":"1024872","UnitPrice":"34.8000","Quantity":"5","Discount":"0"},{"OrderID":"1024914","UnitPrice":"18.6000","Quantity":"9","Discount":"0"},{"OrderID":"1024951","UnitPrice":"42.4000","Quantity":"40","Discount":"0"}]}

第2页的回复：

{"page":"2","total":431,"records":2155,"rows":[{"OrderID":"1025041","UnitPrice":"7.7000","Quantity":"10","Discount":"0"},{"OrderID":"1025051","UnitPrice":"42.4000","Quantity":"35","Discount":"0.15"},{"OrderID":"1025065","UnitPrice":"16.8000","Quantity":"15","Discount":"0.15"},{"OrderID":"1025122","UnitPrice":"16.8000","Quantity":"6","Discount":"0.05"},{"OrderID":"1025157","UnitPrice":"15.6000","Quantity":"15","Discount":"0.05"}]}

Answer 1

首先，我想重复一遍，我不建议您使用本地排序和服务器端分页。我发现用户可能会错误地解释排序结果。

尽管如此，如果您的客户同意具有本地排序和服务器端分页组合的限制，并且如果您确实需要实现该限制，我可以建议您使用以下解决方案：

onPaging: function() {
    $(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid");
},
loadComplete: function (data) {
    var $this = $(this);
    if ($this.jqGrid('getGridParam', 'datatype') === 'json') {
        // because one use repeatitems: false option and uses no
        // jsonmap in the colModel the setting of data parameter
        // is very easy. We can set data parameter to data.rows:
        $this.jqGrid('setGridParam', {
            datatype: 'local',
            data: data.rows,
            pageServer: data.page,
            recordsServer: data.records,
            lastpageServer: data.total
        });

        // because we changed the value of the data parameter
        // we need update internal _index parameter:
        this.refreshIndex();

        if ($this.jqGrid('getGridParam', 'sortname') !== '') {
            // we need reload grid only if we use sortname parameter,
            // but the server return unsorted data
            $this.triggerHandler('reloadGrid');
        }
    } else {
        $this.jqGrid('setGridParam', {
            page: $this.jqGrid('getGridParam', 'pageServer'),
            records: $this.jqGrid('getGridParam', 'recordsServer'),
            lastpage: $this.jqGrid('getGridParam', 'lastpageServer')
        });
        this.updatepager(false, true);
    }
}

如果你不使用repeatitems: false，那么填充jqGrid的data参数的代码会更长一些，但它会起作用。

Answer 2

上述解决方案工作正常，除非我们在网格的最后一页，如果我在最后一页显示3行，尽管页面可容纳5行。
/> 现在，如果我尝试进行客户端排序，最后一页将填充2个额外的行，总共5行将被排序。我会说，可能是最后获取的记录存储在缓冲区中，所以这种情况正在发生。为解决这个问题，onPagination，在将网格设为“json”之前清除网格，就像
一样
clickOnPagination = function() { $(this).jqGrid("clearGridData"); $(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid"); }

并在源代码中注释$t.p.records = 0;$t.p.page=1;$t.p.lastpage=0;函数中的行clearGridData，以便下一个分页可以正常工作。

jqgrid客户端侧排序与服务器端分页 - 数据消失

2 个答案: