var mydata = [{
id: 10,
name: "Toronto",
country: "Canada",
continent: "North America"
}, {
id: 20,
name: "New York City",
country: "USA",
continent: "North America"
}, {
id: 30,
name: "Silicon Valley",
country: "USA",
continent: "North America"
}, {
id: 40,
name: "Paris",
country: "France",
continent: "Europe"
},{
id: 50,
name: "Toronto",
country: "Canada",
continent: "North America"
}, {
id: 60,
name: "New York City",
country: "USA",
continent: "North America"
}, {
id: 70,
name: "Silicon Valley",
country: "USA",
continent: "North America"
}, {
id: 80,
name: "Paris",
country: "France",
continent: "Europe"
},{
id: 90,
name: "Toronto",
country: "Canada",
continent: "North America"
}, {
id: 100,
name: "New York City",
country: "USA",
continent: "North America"
}, {
id: 110,
name: "Silicon Valley",
country: "USA",
continent: "North America"
}, {
id: 120,
name: "Paris",
country: "France",
continent: "Europe"
},{
id: 130,
name: "Toronto",
country: "Canada",
continent: "North America"
}, {
id: 140,
name: "New York City",
country: "USA",
continent: "North America"
}, {
id: 150,
name: "Silicon Valley",
country: "USA",
continent: "North America"
}, {
id: 160,
name: "Paris",
country: "France",
continent: "Europe"
},{
id: 170,
name: "Toronto",
country: "Canada",
continent: "North America"
}, {
id: 180,
name: "New York City",
country: "USA",
continent: "North America"
}, {
id: 190,
name: "Silicon Valley",
country: "USA",
continent: "North America"
}, {
id: 200,
name: "Paris",
country: "France",
continent: "Europe"
},{
id: 210,
name: "Toronto",
country: "Canada",
continent: "North America"
}, {
id: 220,
name: "New York City",
country: "USA",
continent: "North America"
}, {
id: 230,
name: "Silicon Valley",
country: "USA",
continent: "North America"
}, {
id: 240,
name: "Paris",
country: "France",
continent: "Europe"
},{
id: 250,
name: "Toronto",
country: "Canada",
continent: "North America"
}, {
id: 260,
name: "New York City",
country: "USA",
continent: "North America"
}, {
id: 270,
name: "Silicon Valley",
country: "USA",
continent: "North America"
}, {
id: 280,
name: "Paris",
country: "France",
continent: "Europe"
},{
id: 290,
name: "Toronto",
country: "Canada",
continent: "North America"
}, {
id: 300,
name: "New York City",
country: "USA",
continent: "North America"
}, {
id: 310,
name: "Silicon Valley",
country: "USA",
continent: "North America"
}, {
id: 320,
name: "Paris",
country: "France",
continent: "Europe"
},{
id: 330,
name: "Toronto",
country: "Canada",
continent: "North America"
}, {
id: 340,
name: "New York City",
country: "USA",
continent: "North America"
}, {
id: 350,
name: "Silicon Valley",
country: "USA",
continent: "North America"
}, {
id: 360,
name: "Paris",
country: "France",
continent: "Europe"
},{
id: 370,
name: "Toronto",
country: "Canada",
continent: "North America"
}, {
id: 380,
name: "New York City",
country: "USA",
continent: "North America"
}, {
id: 390,
name: "Silicon Valley",
country: "USA",
continent: "North America"
}, {
id: 400,
name: "Paris",
country: "France",
continent: "Europe"
}];
$("#grid").jqGrid({
data: mydata,
datatype: "local",
colNames: ["Name", "Country", "Continent"],
colModel: [
{ name: 'name' },
{ name: 'country' },
{ name: 'continent' }
],
cmTemplate: { editable: true },
rowNum: 10,
pager: '#pager',
cellEdit: true,
cellsubmit: 'clientArray',
rownumbers: true,
gridview: true,
autoencode: true,
height: 'auto',
onPaging: function () {
var $self = $(this), p = $self.jqGrid("getGridParam");
$self.jqGrid("saveCell", p.iRow, p.iCol);
}
});
html, body { font-size: 75%; }
.ui-jqgrid-hdiv { overflow-y: hidden; }
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<table id="grid"><tr><td></td></tr></table>
<div id="pager"></div>