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

它在jqgrid文档中声明下面的代码应该允许使用服务器端分页进行本地排序; 网格数据在分页上消失;这个问题已被问及以前没有明确的答案 - 建议使用loadonce：true意味着分页关闭 - 我需要分页jqgrid客户端与服务器端分页排序 - 数据消失

编辑后显示完整的html页面和json响应（我现在运行这从一个PHP/mysql后端）。 1日负荷

我完全的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>

响应是从第2页

{"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"}]}

响应：

{"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"}]}

来源

2012-01-27 Pete_ch

问题的原因可能不仅仅是jqGrid中的一个bug，还包括服务器部分提供的数据中的错误，您在'colModel'中使用的格式化程序等等。您能否包含jqGrid的更多完整定义以及从服务器返回的两个JSON响应：第一个将响应第一个页面的请求，第二个响应来自第二个页面的请求。拥有所有数据可以重现您的问题。尽管如此，我个人在本地排序和服务器端分页的组合方面意识不强。 – Oleg 2012-01-27 07:58:29

我喜欢客户端排序，以避免需要实现服务器端排序，除了性能 - 除非有人建议使用LINQ to sql – 2012-01-27 08:17:59

无痛多列服务器排序（和多列搜索:-)）您发布的JSON响应不是完整的，所以它不能用来重现问题。我现在看到你使用'scroll：1'，它在*不分页数据*中。它是*虚拟滚动*。我认为你应该删除使程序运行的选项。从性能的角度来看，服务器端的数据排序更加有效。此外，如果用户请求获取按列来排序的第一页数据，则必须先对数据进行排序，然后获取结果的第一页以提供正确的响应。 – Oleg 2012-01-27 09:08:03

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

不过，如果客户同意限制具有本地排序和服务器端分页的组合，如果你真的需要实现的是，我可以建议你将以下解决方案：

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参数的代码会稍微长一些，但它会起作用。

来源

2012-01-28 17:17:17 Oleg

这个解决方案只是一个小故障 - 在排序第1页以外的页面时，寻呼机跳回第1页，但数据正常 – 2012-01-29 01:20:10

@chohi：页码的问题可以很容易修复。查看我答案的更新代码。 – Oleg 2012-01-29 10:12:30

谢谢奥列格 - 这个作品完美;我也接受你的建议，并在以后使用服务器排序 – 2012-01-29 17:22:11

上述解决方案工作正常，除非我们在网格的最后一页，例如我有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功能，使下一个分页将正常工作。

来源

2012-11-21 12:00:02 venugopal

不错，但对源代码进行更改不是一个好的维护主意。 – darksoulsong 2014-10-30 17:26:14

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

回答

相关问题