jqgrid clasificación del lado del cliente con paginación del lado del servidor - los datos desaparecen

indica en la documentación de jqgrid que el código siguiente debe permitir la clasificación local con paginación del lado del servidor; los datos de la cuadrícula desaparecen en la búsqueda; esta pregunta se ha hecho antes, con una respuesta clara - sugerencias para utilizar loadonce: true significa que la paginación se apaga - Necesito paginaciónjqgrid clasificación del lado del cliente con paginación del lado del servidor - los datos desaparecen

editar posteriormente PARA MOSTRAR página HTML completa y respuesta JSON (Im ahora ejecutar este desde un php/mysql backend).

mi página 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>

respuesta el 1 de carga es

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

respuesta de la página 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"}]}

Fuente

2012-01-27 Pete_ch

La razón del problema podría ser no solo un error en jqGrid, sino también un error en los datos proporcionados por la parte del servidor, formateadores que se usan en el 'colModel' y más. Podría incluir una definición más completa de jqGrid y también dos respuestas JSON devueltas por el servidor: la primera responderá a petición de la primera página y la segunda respuesta JSON a partir de la solicitud de la segunda página. Al tener todos los datos, uno puede reproducir su problema. Sin embargo, personalmente tengo menos sentido en combinación con la clasificación local y la paginación del lado del servidor. – Oleg

Prefiero la clasificación de clientes para evitar la necesidad de implementar la clasificación del lado del servidor, además del rendimiento, a menos que alguien sugiera una clasificación de servidor de varias columnas (y búsqueda en varias columnas :-)) utilizando linq a sql –

La respuesta JSON que ha publicado no es lleno, por lo que no se puede utilizar para reproducir el problema. Ahora veo que usas 'scroll: 1' que en * no busca datos *. Es * desplazamiento virtual *. Creo que deberías eliminar la opción para que el programa funcione. La clasificación de datos en el lado del servidor es mucho más efectiva desde el punto de vista del rendimiento.Además, si el usuario solicita obtener la primera página de datos ordenados por columna, debe ordenar primero los datos y luego obtener la primera página de los resultados para proporcionar la respuesta correcta. – Oleg

En primer lugar quiero repetir que yo no tenga le recomendamos usar la ordenación local y la paginación del lado del servidor. Encuentro que el usuario puede interpretar mal el resultado de la clasificación.

Sin embargo, si su cliente está de acuerdo con la restricción que tienen la combinación de clasificación local y la paginación del lado del servidor y si realmente necesidad de implementar que, puedo sugerir la siguiente solución:

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 no usa repeatitems: false, el código que llena el parámetro data de jqGrid será un poco más largo, pero funcionará.

Fuente

2012-01-28 17:17:17 Oleg

solo una pequeña falla en esta solución: al ordenar páginas que no sean la página 1, el buscapersonas salta a la página 1 pero los datos están bien –

@chohi: el problema con el número de página podría solucionarse fácilmente. Ver el código actualizado de mi respuesta. – Oleg

gracias Oleg - esto funciona perfectamente; También tomo su consejo y luego usaré el servidor de clasificación –

La solución anterior funciona bien, excepto en el caso en que en si estamos en la última página de la cuadrícula, digamos que tengo 3 filas en la última página aunque la página puede acomodar 5 filas.

Ahora, si trato de ordenar por el lado del cliente, la última página se completará con 2 filas adicionales y se ordenarán las 5 filas. Yo diría que puede ser que los últimos registros obtenidos se almacenen en el búfer para que esto ocurra. Como solución a este, onPagination, limpiar la red antes de hacer la red como "json", como

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

y en el comentario de código fuente de las líneas
$t.p.records = 0;$t.p.page=1;$t.p.lastpage=0; en clearGridData función para que la próxima paginación funcionará correctamente.

Fuente

2012-11-21 12:00:02 venugopal

Buena captura, pero hacer cambios en el código fuente no es una buena idea para el mantenimiento. – darksoulsong

jqgrid clasificación del lado del cliente con paginación del lado del servidor - los datos desaparecen

Respuesta

Cuestiones relacionadas