Agregando Paginación jQuery Grid.

Como lo prometido es deuda, tarde pero hay voy, llevo tiempo sin tiempo para escribir pero voy a tratar en estos días de publicar los artículos referentes al uso de jQuery Grid. En este manual les voy a mostrar como agregar paginación al Grid que ya habíamos creado en el tutorial anterior.

Agregar la paginación es sumamente sencillo, y no nos va a tomar mucho tiempo. Lo único que necesitamos es el proyecto anterior en nuestra computadora.

Empezamos, lo primero que debemos hacer es agregar un elemento div después de el elemento table con el id=pager.

Después tenemos que agregar al constructor de jqGrid estos dos elementos: pager, rowNum estos dos elementos son lo básico para que jqGrid empiece a paginar las tablas.

• pager: es la opción de jqGrid, donde especificamos el id del div, que jqGrid va a usar como barra de navegación. Debemos colocar es un selector como el que colocamos entre paréntesis.
• rowNum: con este parámetro le decimos al plugin cuantas filas va a mostrar por pagina. Ya solamente con especificar esto, el jqGrid pagina nuestro resultado de 10 en 10.

A la final quedaria de esta manera el código de javascript:

$("#list").jqGrid({
 datatype: "local",
 data: mydata,
 height: 250,
 colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
 colModel:[
  {name:'id',index:'id', width:60},
  {name:'invdate',index:'invdate', width:90},
  {name:'name',index:'name', width:100},
  {name:'amount',index:'amount', width:80, align:"right"},
  {name:'tax',index:'tax', width:80, align:"right"},
  {name:'total',index:'total', width:80,align:"right"},
  {name:'note',index:'note', width:150, sortable:false}
  ],
 caption: "http://sosinformatico.blogspot.com",
 altRows: true,
 pager:'#pager',
 rowNum: 10

});
 for(var i=0;i<=mydata.length;i++)
  jQuery("#list").jqGrid('addRowData',i+1,mydata[i]);
 jQuery("#list").trigger("reloadGrid")
});

Al final del javascript después de cargar las filas debemos agregar un desencadenador del evento "reloadgrid", para que jqGrid re ordene y acomode las filas con la paginación que le agregamos.

Parámetros extras para la paginación.

Aparte hay otros parámetros que podemos configurar que tienen que ver con la paginacion:

• rowList: con este parámetro le especificamos al jqGrid, que de la opción de poder cambiar el numero de filas que va a mostrar, es decir que la persona pueda establecer el numero de filas que va a mostrar por en el grid.
• height: con el parámetro height especificamos la altura del grid, pero si lo ponemos en "auto", el grid va a tener automáticamente la altura que tengan las filas que están internas del grid, y si las cambiamso automáticamente cambia la altura del grid.

Repositorio GitHub: https://github.com/bomba1990/JqGrid-Ejemplos

Con esto terminamos por hoy como siempre los enlaces para descargarlo y para verlo en acción:
Descarga
jqGrid Basico2