javascript - Issues Loading jqGrid with 25,000 Rows -

javascript - Issues Loading jqGrid with 25,000 Rows -

i'm having difficulty loading jqgrid big amount of rows. 1 time document ready i'm calling javascript function gets collection of objects api , adds row info grid. has been working fine, have on 20,000 rows, grid never loads. there can prepare this? possible paint info user can see? example, if row number on pager set 50, can load 50 rows , not 25,000?

here's grid:

$(function () {

$("#grid").jqgrid({ datatype: "local", loadonce: false, height: "auto", search: true, title: false , autowidth: true, shrinktofit: true, searchonenter: true, colnames: ['id', 'bdo number', 'bdo date', 'delivery date', 'miles', 'zip code', 'zone', 'fuel surcharge', 'driver', 'driver rate', 'total driver pay', 'order', 'driver id', 'vendor id', 'vendor', 'airport', 'airline', 'claim reference', 'clear date', 'mileage', 'mileage cost', 'special', 'special cost', 'exc cost', 'pickup date', 'total delivery cost', 'vendor profit', 'driver percent', 'driver fuel surcharge', 'total driver reported', 'payment', 'user cleared', 'excess costs', 'additional fees', 'drivercostschemaid'], colmodel: [ { name: 'id', index: 'id', hidden: true }, { name: 'bdonumber', index: 'bdonumber', align: 'center', classes: 'gridbutton' }, { name: 'bdodate', index: 'bdodate', width: 250, align: 'center', formatter: 'date', formatoptions: { newformat: 'l, f d, y g:i:s a' } }, { name: 'deliverydate', index: 'deliverydate', width: 250, align: 'center', formatter: 'date', formatoptions: { newformat: 'l, f d, y g:i:s a' } }, { name: 'miles', index: 'miles', width: 40, align: 'center' }, { name: 'zipcode', index: 'zipcode', width: 55, align: 'center' }, { name: 'zone', index: 'zone', width: 40, align: 'center' }, { name: 'fuelfloat', index: 'fuelfloat', width: 50, align: 'center', formatter: money, sorttype: 'float' }, { name: 'drivername', index: 'drivername', width: 125, align: 'center' }, { name: 'ratefloat', index: 'ratefloat', width: 75, align: 'center', formatter: money, sorttype: 'float' }, { name: 'payfloat', index: 'payfloat', width: 75, align: 'center', formatter: money, sorttype: 'float' }, { name: 'order', index: 'order', hidden: true }, { name: 'driver', index: 'driver', hidden: true }, { name: 'vendor', index: 'vendor', hidden: true }, { name: 'airport', index: 'airport', hidden: true }, { name: 'airline', index: 'airline', hidden: true }, { name: 'vendorname', index: 'vendorname', hidden: true }, { name: 'claimreference', index: 'claimreference', hidden: true }, { name: 'cleardate', index: 'cleardate', hidden: true, formatter: 'date', formatoptions: { newformat: 'l, f d, y g:i:s a' } }, { name: 'mileage', index: 'mileage', hidden: true }, { name: 'mileagecost', index: 'mileagecost', hidden: true, formatter: money }, { name: 'special', index: 'special', hidden: true }, { name: 'specialcost', index: 'specialcost', hidden: true, formatter: money }, { name: 'exccost', index: 'exccost', hidden: true, formatter: money }, { name: 'pickupdate', index: 'pickupdate', hidden: true, formatter: 'date', formatoptions: { newformat: 'l, f d, y g:i:s a' } }, { name: 'totaldeliverycost', index: 'totaldeliverycost', hidden: true, formatter: money }, { name: 'vendorprofit', index: 'vendorprofit', hidden: true, formatter: money }, { name: 'driverpercent', index: 'driverpercent', hidden: true }, { name: 'driverfuelsurcharge', index: 'driverfuelsurcharge', hidden: true, formatter: money }, { name: 'totaldriverreported', index: 'totaldriverreported', hidden: true, formatter: money }, { name: 'payment', index: 'payment', hidden: true }, { name: 'usercleared', index: 'usercleared', hidden: true }, { name: 'exccost', index: 'exccost', hidden: true }, { name: 'additionalfees', index: 'additionalfees', hidden: true, formatter: money }, { name: 'drivercostschemaid', index: 'drivercostschemaid', hidden: true }, ], rownum: 100, rowlist: [100, 500, 1000, 100000], viewrecords: true, pager: "pager", sortorder: "desc", sortname: "deliverydate", ignorecase: true, headertitles: true, emptyrecords: "there no results.", }) $("#grid").jqgrid('filtertoolbar', { stringresult: true, searchonenter: true, defaultsearch: 'cn' }); getbdos(); });

and getbdos function:

function getbdos() {

var request = $.ajax({ url: "@url.action("getbdos", "dpadmin")", type: "get", cache: false, async: true, datatype: "json" }); request.done(function (results) { var thegrid = $("#grid"); thegrid.cleargriddata(); (var = 0; < 100; i++) { thegrid.addrowdata(i + 1, results[i]); } thegrid.trigger("reloadgrid"); }); }

which calls this:

[authorize] public jsonresult getbdos() { list<bdo> bdos= new list<bdo>(); // bdos bdos = webinterface.getbdos(); var jsonresult = json(bdos.toarray(), jsonrequestbehavior.allowget); jsonresult.maxjsonlength = int.maxvalue; homecoming jsonresult; }

webinterface.getbdos hits database , grabs current bdo objects, between 20,000 - 25,000 , freezes grid. help this?

you should paginating info on server side before sending browser. need fetch next/prev page , redraw grid.

javascript jquery jqgrid