5
nó nêu rõ trong tài liệu jqgrid rằng mã bên dưới sẽ cho phép phân loại cục bộ với phân trang bên máy chủ; dữ liệu lưới biến mất khi phân trang; câu hỏi này đã được hỏi trước không có câu trả lời rõ ràng - gợi ý để sử dụng loadonce: true nghĩa là phân trang bị tắt - Tôi cần phân trangjqgrid phân loại phía máy khách với phân trang bên máy chủ - dữ liệu biến mất
edited sau để hiển thị trang html COMPLETE và json phản ứng (Im bây giờ đang chạy này từ một php/mysql backend).
trang đầy đủ html của tôi
<!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>
phản ứng trên tải 1 là
{"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"}]}
phản hồi từ trang 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"}]}
Lý do của sự cố có thể không chỉ là lỗi trong jqGrid, mà còn là lỗi trong dữ liệu do phần máy chủ cung cấp, các trình định dạng mà bạn sử dụng trong 'colModel', v.v. Bạn có thể bao gồm định nghĩa đầy đủ hơn về jqGrid và cả hai phản hồi JSON được trả về từ máy chủ: câu trả lời đầu tiên sẽ được trả lời theo yêu cầu của trang đầu tiên và phản hồi JSON thứ hai từ yêu cầu của trang thứ hai. Có tất cả dữ liệu có thể tái tạo vấn đề của bạn. Tuy nhiên, cá nhân tôi có ít ý nghĩa hơn trong sự kết hợp giữa phân loại cục bộ và phân trang bên máy chủ. – Oleg
Tôi thích phân loại khách hàng để tránh cần phải sắp xếp phía máy chủ, cộng với hiệu suất - trừ khi ai đó đề xuất loại máy chủ đa cột miễn phí (và tìm kiếm nhiều cột :-)) sử dụng LINQ to sql –
Phản hồi JSON mà bạn đã đăng không đầy đủ, vì vậy nó không thể được sử dụng để tái tạo vấn đề. Tôi thấy bây giờ bạn sử dụng 'scroll: 1' mà trong * không phân trang dữ liệu *. Đó là * di chuyển ảo *. Tôi nghĩ rằng bạn nên loại bỏ các tùy chọn để làm cho chương trình làm việc. Việc sắp xếp dữ liệu ở phía máy chủ sẽ hiệu quả hơn nhiều so với quan điểm thực hiện.Hơn nữa nếu người dùng yêu cầu để có được trang đầu tiên của dữ liệu được sắp xếp theo cột bạn phải sắp xếp dữ liệu đầu tiên và sau đó nhận được trang đầu tiên của kết quả để cung cấp phản hồi chính xác. – Oleg