Here is my code
$(document).ready(function () {
$('#jqgProducts').jqGrid({
url: '/Home/GridSampleData/', // url from which data should be requested
datatype: 'json', // type of data
mtype: 'GET', // url access method type
colNames: ['userid', 'username', 'email', 'contact', 'password'],
colModel: [ // columns model
{ name: 'userId', index: 'userId', align: 'left',
editable: false },
{ name: 'username', index: 'username', align: 'left',
editable: true, edittype: 'text',
editoptions: { maxlength: 20 },
editrules: { required: true} },
{ name: 'email', index: 'email', align: 'left', editable: true,
edittype: 'text', editoptions: { maxlength开发者_高级运维: 50 },
editrules: { required: true} },
{ name: 'contact', index: 'contact', align: 'left',
editable: true, edittype: 'text',
editoptions: { maxlength: 20 }, editrules: { required: true} },
{ name: 'password', index: 'password', align: 'left',
editable: true, edittype: 'password',
editoptions: { maxlength: 20 },
editrules: { required: true} }
],
pager: $('#jqgpProducts'), // pager for grid
rowNum: 5, // number of rows per page
sortname: 'userId', // initial sorting column
sortorder: 'asc', // initial sorting direction
viewrecords: true, // we want to display total records count
width: '600', // grid width
height: 'auto' // grid height
});
});
Include "toppager: true" to the list of jqGrid options. This do exactly what you want: "When enabled this option place a pager element at top of the grid below the caption (if available). If another pager is defined both can coexists and are refreshed in sync."
The full list of options you can find on http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
This is 4 years late but I saw something like this, template option
template: '<div>' +
'<div class="jqgrid-pagination"></div>' +
'<table></table>' +
'<div class="jqgrid-pagination"></div>' +
'</div>',
精彩评论