Paing with json
i follow that code
The JSON response received from server is in the below format
{ "totalRecords": 830, "curPage": 1, "data": [ ["France", "Paul Henriot", 10248, .......], ....] }
$(function () {
var colM = [{ title: "ProductId", width: 100, dataType: "string", dataIndx: "ProductId" },
{ title: "CategoryId", width: 200, dataType: "string", dataIndx: "CategoryId" },
{ title: "Name", width: 150, dataType: "string", align: "right", dataIndx: "Name" },
{ title: "Descn", width: 150, dataType: "string", align: "right", dataIndx: "Descn" },
{ title: "Image", width: 150, dataType: "string", align: "right", dataIndx: "Image" }
];
var dataModel = {
location: "remote",
sorting: "local",
paging: "local",
method: "GET",
dateType: "JSON",
rPP: 20,
sortIndex: 2,
sortDir: "up",
rppOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000],//下拉框选择跳转页数
getUrl: function () {
//var sortDir = (this.sortDir == "up" ? "asc" : "desc");
//var sort = ['ProductId', 'CategoryId', 'Name', 'Descn', 'Image'];
return {
url: "griddata.ashx"
};//, data: "cur_page=" + this.curPage + "&records_per_page=" +this.rPP + "&sortBy=" + sort[this.sortIndx] + "&dir=" + sortDir
},
getData: function (dataJSON, textStatus, jqXHR) {
return {data: dataJSON.data};//curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords,
}
}
var $grid = $("div#grid_array").pqGrid({
width: 550, height: 400,
dataModel: dataModel,
colModel: colM,
title: "PQGrid Data Test"
});
//$grid.pqGrid("option", "numberCell", false);
$grid.pqGrid("option", "roundCorners", true);
})
response from the server:
{"data":[{"ProductId":"BD-01","CategoryId":"BIRDS","Name":"Pelican","Descn":"Will sit in your garden and admire nature","Image":"~/Prod_Images/Birds/icon-pelican.gif"},{"ProductId":"BD-02","CategoryId":"BIRDS","Name":"Penguin","Descn":"Guaranteed to stay by your side","Image":"~/Prod_Images/Birds/icon-penguin.gif"},{"ProductId":"BD-03","CategoryId":"BIRDS","Name":"Pteranodon","Descn":"Can't let go of the past? This is your bird","Image":"~/Prod_Images/Birds/icon-pteranodon.gif"},{"ProductId":"BD-04","CategoryId":"BIRDS","Name":"Owl","Descn":"Your personal dictionary ? night & day","Image":"~/Prod_Images/Birds/icon-owl.gif"},{"ProductId":"BD-05","CategoryId":"BIRDS","Name":"Duck","Descn":"Lisps but otherwise sings well","Image":"~/Prod_Images/Birds/icon-duck.gif"},{"ProductId":"BG-01","CategoryId":"BUGS","Name":"Ant","Descn":"Trash your vacuum cleaner","Image":"~/Prod_Images/Bugs/icon-ant.gif"},{"ProductId":"BG-02","CategoryId":"BUGS","Name":"Butterfly","Descn":"Increased beauty with age","Image":"~/Prod_Images/Bugs/icon-butterfly.gif"},{"ProductId":"BG-03","CategoryId":"BUGS","Name":"Spider","Descn":"Loves a good massage","Image":"~/Prod_Images/Bugs/icon-spider.gif"},{"ProductId":"BG-04","CategoryId":"BUGS","Name":"Slug","Descn":"Your soft hugging buddy","Image":"~/Prod_Images/Bugs/icon-slug.gif"},{"ProductId":"BG-05","CategoryId":"BUGS","Name":"Frog","Descn":"Want to get rid of an insect previously bought?","Image":"~/Prod_Images/Bugs/icon-frog.gif"},{"ProductId":"BG-06","CategoryId":"BUGS","Name":"Dragonfly","Descn":"Beware of the meat lover","Image":"~/Prod_Images/Bugs/icon-dragonfly.gif"},{"ProductId":"BY-01","CategoryId":"BYARD","Name":"Sheep","Descn":"Your soft hugging buddy","Image":"~/Prod_Images/Backyard/icon-sheep.gif"},{"ProductId":"BY-02","CategoryId":"BYARD","Name":"Cat","Descn":"The friend you will never see","Image":"~/Prod_Images/Backyard/icon-cat.gif"},{"ProductId":"BY-03","CategoryId":"BYARD","Name":"Raccoon","Descn":"Always keeps your dishes clean","Image":"~/Prod_Images/Backyard/icon-raccoon.gif"},{"ProductId":"BY-04","CategoryId":"BYARD","Name":"Goose","Descn":"For your protection delivered in our special safety-bag","Image":"~/Prod_Images/Backyard/icon-goose.gif"},{"ProductId":"BY-05","CategoryId":"BYARD","Name":"Crab","Descn":"The common house crab which lives in the refrigerator","Image":"~/Prod_Images/Backyard/icon-crab.gif"},{"ProductId":"BY-06","CategoryId":"BYARD","Name":"Skunk","Descn":"You will love it - especially when you have your in-laws visiting","Image":"~/Prod_Images/Backyard/icon-skunk.gif"},{"ProductId":"BY-07","CategoryId":"BYARD","Name":"Zebra","Descn":"The horse of the modern girl","Image":"~/Prod_Images/Backyard/icon-zebra.gif"},{"ProductId":"DR-01","CategoryId":"EDANGER","Name":"Skeleton","Descn":"Dumb but hollow","Image":"~/Prod_Images/Endangered/icon-skeleton.gif"},{"ProductId":"DR-02","CategoryId":"EDANGER","Name":"Pet","Descn":"The originals ? honestly!","Image":"~/Prod_Images/Endangered/icon-pet.gif"},{"ProductId":"DR-03","CategoryId":"EDANGER","Name":"Dino","Descn":"Special offer: only for a limited time","Image":"~/Prod_Images/Endangered/icon-dino.gif"},{"ProductId":"DR-04","CategoryId":"EDANGER","Name":"Panda","Descn":"Last one ? go for it!","Image":"~/Prod_Images/Endangered/icon-panda.gif"},{"ProductId":"DR-05","CategoryId":"EDANGER","Name":"Fish","Descn":"They are waiting for your help","Image":"~/Prod_Images/Endangered/icon-fish.gif"},{"ProductId":"FI-01","CategoryId":"FISH","Name":"Meno","Descn":"Your worried tiny friend warns you about life's dangers","Image":"~/Prod_Images/Fish/icon-meno.gif"},{"ProductId":"FI-02","CategoryId":"FISH","Name":"Balloonfish","Descn":"It's your thermometer - the hotter it gets the bigger it gets","Image":"~/Prod_Images/Fish/icon-ballonfish.gif"},{"ProductId":"FI-03","CategoryId":"FISH","Name":"Blindfish","Descn":"Likes pressure - ideal for divorcing couples","Image":"~/Prod_Images/Fish/icon-blindfish.gif"},{"ProductId":"FI-04","CategoryId":"FISH","Name":"Crabfish","Descn":"Dances and sings every time you feed it!","Image":"~/Prod_Images/Fish/icon-Crabfish.gif"},{"ProductId":"FI-05","CategoryId":"FISH","Name":"Eucalyptus","Descn":"For the tickle on your hands: you'll love the massage","Image":"~/Prod_Images/Fish/icon-eucalyptus.gif"},{"ProductId":"FI-06","CategoryId":"FISH","Name":"Mister No","Descn":"Need a companion for the dark times?","Image":"~/Prod_Images/Fish/icon-misterno.gif"},{"ProductId":"FI-07","CategoryId":"FISH","Name":"Nosyfish","Descn":"Don't underestimate this one - it bites!","Image":"~/Prod_Images/Fish/icon-nosyfish.gif"},{"ProductId":"FI-08","CategoryId":"FISH","Name":"Tooth Ferry","Descn":"Very sensitive vegetarian, needs food every two months","Image":"~/Prod_Images/Fish/icon-toothferry.gif"}]}
