jqgrid côté client, tri avec le côté serveur de pagination des données disparaît

il est dit dans jqgrid de la documentation que le code ci-dessous devrait permettre de poste local avec le serveur pagination côté;
la grille de données disparaît sur la pagination; cette question a été posée avant avec pas de réponse claire - suggestions pour l'utilisation loadonce:true signifie que la pagination est désactivée - j'ai besoin de pagination

ÉDITÉ plus TARD POUR MONTRER COMPLÈTE de la page html et la réponse json
(Im maintenant en cours d'exécution à partir d'un php/mysql backend).

ma page 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>

réponse sur la 1ère charge est

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

réponse à partir de la page 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"}]}
La raison du problème pourrait être non seulement un bug dans jqGrid, mais aussi le bug dans les données fournies par la partie serveur, formateurs que vous utilisez dans le colModel et ainsi de suite. Pourriez-vous inclure plus de la définition complète de la jqGrid et aussi deux réponse JSON retourné par le serveur: la première sera de répondre à la demande de la première page et la deuxième réponse JSON à partir de la demande de la deuxième page. Avoir toutes les données que l'on peut reproduire votre problème. Néanmoins, personnellement, je a moins de sens, en combinaison avec le local de tri et de côté de serveur d'échange.
Je préfère client de tri pour éviter la nécessité de mettre en œuvre côté serveur de tri, plus de performance, à moins que quelqu'un propose une douleur colonne multi serveur de tri (et multi colonne de recherche :-)) à l'aide de linq to sql
La réponse JSON qui vous avez posté n'est pas complet, donc il ne peut pas être utilisé pour reproduire le problème. Je vois maintenant que vous utilisez scroll:1 qui, dans ce n'est pas la pagination des données. le défilement virtuel. Je pense que vous devriez supprimer l'option de faire le programme de travail. Le tri des données sur le côté serveur est beaucoup plus efficace du point de vue des performances. En outre, si la demande de l'utilisateur pour obtenir la première page de données triée par venir colonne, vous devez trier les données en premier et ensuite obtenir la première page des résultats à fournir la bonne réponse.
Qui multi colonne de tri que vous devez avoir dans l'exemple?
Grâce oleg, j'ai juste ajouté le défilement après le 1er à poster la question, normal pagination vs de défilement ne fait aucune différence à mon problème de tri. Je vais modifier à la demande de charge plus petite donc réponse complète n'est pas ridiculuosly grand ici. Je wdnt l'esprit et sera probablement dans une phase ultérieure de serveur de build côté de tri, à la recherche d'un élégant côté serveur de la solution de recherche et de tri par colonnes variables (à l'aide de linq to sql - je n'aime pas voir trop..si les conditions de vérification pour la recherche et le tri des paramètres)

OriginalL'auteur Pete_ch | 2012-01-27

  1. 7

    Tout d'abord, je veux répéter que je ne vous recommande pas d'utiliser locales de tri et le côté serveur d'échange. Je trouve que l'utilisateur peut mal interpréter le résultat de tri.

    Néanmoins, si votre client en accord avec les restrictions qui ont la combinaison de tri à la source et le serveur de pagination et si vous vraiment nécessité de mettre en œuvre, je peux vous suggérer la solution suivante:

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

    Si vous n'utilisez pas repeatitems: false le code qui remplit data paramètre de jqGrid sera un peu plus long, mais ça fonctionne.

    juste un petit problème dans cette solution sur le tri des pages autres que la page 1, la pagination saute de retour à la page 1, mais les données sont ok
    le problème avec le numéro de page peut être très facile fixe. Voir le code mis à jour de ma réponse.
    grâce Oleg - cela fonctionne parfaitement; j'ai également prendre vos conseils et sera plus tard utiliser le serveur de tri
    Vous êtes les bienvenus! Vous pouvez également poster la référence à ma réponse sur la page où vous avez trouvé le code qui vous utilisez. Je pense que d'autres que pour les autres utilisateurs, la solution pourrait être intéressante. Meilleurs voeux!

    OriginalL'auteur Oleg

  2. 0

    La solution ci-dessus fonctionne bien sauf dans le cas où si nous sommes à la dernière page de la grille, dire que j'ai 3 lignes affichées dans la dernière page, même si la page peut accueillir 5 lignes.

    Maintenant, si j'essaie de le faire côté client de tri, la dernière page sera remplie avec 2 lignes supplémentaires et l'ensemble des 5 lignes seront triés. Je dirais, peut-être la dernière extraction des enregistrements sont stockés dans le tampon, de sorte ce qui se passe. Comme correctif de ce, onPagination, effacer la grille avant de la grille "json", comme

    clickOnPagination = function() {
    $(this).jqGrid("clearGridData");
    $(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid");
    }

    et dans le code source de commenter les lignes
    $t.p.records = 0;$t.p.page=1;$t.p.lastpage=0; dans clearGridData fonction de sorte que le lendemain de la pagination ne fonctionne plus correctement.

    Belle prise, mais des changements dans le code source n'est pas une bonne idée pour l'entretien.

    OriginalL'auteur venugopal