javascript - JQgrid on sorting data changes for ID column -
i using jqgrid display data, data in grid added row row. using "local" data type enable sorting on client side. having 'id'in colmodel stores database id. @ first time data loaded when click on header sorting data content of 'id' column changes 1,2 ...
please help..
my code
var pagenumber=0, previouslyselectedid, numberofrecords; var numberofpages,sortingflag=false; $(function() { $("#suppliercommoditylist").jqgrid({ datatype: "local", colnames:['id','supplier','commodity','unit','cost per unit','start date','end date'], colmodel:[ {name:'id',index:'id',hidden:true}, {name:'supplier.name',index:'supplier.name',sorttype:"string",formatter:wraptolinkformatter}, {name:'coproductspecification.name',index:'coproductspecification.name',sorttype:"string",sortable:true}, {name:'unit',index:'unit',sorttype:"string"}, {name:'expense',index:'expense',sorttype:"int"}, {name:'startdatestr',index:'startdate',formatter:dateformatter}, {name:'enddatestr',index:'enddate',formatter:dateformatter} ], pager: '#suppliercommoditypager', //require id pagination, contains id pagination div. viewrecords: true, multiselect: false, // enable multiselect (chack box) caption: "supplier commodity", //to show title on top width: 920, height:600, viewrecords: true, loadonce: true, // enable sorting on client side sortable: true, //to enable sorting onpaging:paginationevent, //pagination onsortcol:sortingevent, gridcomplete:gridcompletefunction, editurl: "clientarray" }).navgrid('#suppliercommoditylist',{edit:false,add:false,del:false}); attach_events(pagiantion_control_classes,'suppliercommoditylist','suppliercommoditypager',get_supplier_commodity_details); sortingevent.gridid='suppliercommoditylist'; //id of grid sortingevent.pagerid='suppliercommoditypager';//id of pager get_supplier_commodity_details(0); }); /** * method data . */ var get_supplier_commodity_details=function(requestedpage){ if(typeof requestedpage == 'undefined') requestedpage=0; var rurl='suppliercommodity/false'; $.ajax({ url: rurl+'/'+requestedpage, processdata:false, type: 'get', success: function(data, textstatus, jqxhr){ render_supplier_commodity_details(data,requestedpage); } }); }; /** * method used render data in grid, row row * */ var render_supplier_commodity_details=function(data,pageno){ numberofrecords=data.numberofrecords; var numberofpages=data.totalpages; var noofrecordperpage=0; console.debug(data); $.each(data.suppliercommoditylist,function(i,row){ $("#suppliercommoditylist").jqgrid('addrowdata',row.id,row); noofrecordperpage+=1; }); //alert(noofrecordperpage); $("#suppliercommoditylist").setgridparam({rownum:numberofrecords}); //jquery("#suppliercommoditylist").trigger("reloadgrid"); // avoid total no of pages shown 0. $('span#sp_1_suppliercommoditypager').text(data.totalpages); //shows total pages $('input.ui-pg-input').val(pageno+1); $("#suppliercommoditylist").setgridparam({rownum:numberofrecords}); if(numberofpages==1){ $('#suppliercommoditypager .ui-paging-info').text('view '+ 1 +' - '+ noofrecordperpage+ ' of '+noofrecordperpage); }else if(numberofpages==(parseint(pageno)+1)){ var minrecord=numberofrecords-noofrecordperpage+1; var maxrecord=numberofrecords; $('#suppliercommoditypager .ui-paging-info').text('view '+ minrecord +' - '+ maxrecord+ ' of '+numberofrecords); }else if(numberofpages!=1){ var minrecord=(noofrecordperpage*pageno)+1; var maxrecord=noofrecordperpage*(pageno+1)>numberofrecords?noofrecordperpage :noofrecordperpage*(pageno+1); $('#suppliercommoditypager .ui-paging-info').text('view '+minrecord +' - '+ maxrecord+ ' of '+data.numberofrecords); } }; /** * method handling sorting of column */ sortingevent=function(index,icol,sortorder){//index=col. name, icol=index of column,sortorder=asc or desc // console.debug(index+ icol+sortorder+" satrt"); sortingflag=true; //flag required in gridcompletefunction change text in pager. numberofpages=$('span#sp_1_'+sortingevent.pagerid).text(); var pagenumber=$('#'+sortingevent.pagerid+' .ui-pg-input').val(); if(icol== 6 || icol==7){ var obj=$("#"+sortingevent.gridid).jqgrid('getrowdata'); console.debug(obj); comparedate.sortorder=sortorder=='asc'?1:-1; //for acending order directly return 1 if 1st element<2nd element comparedate.sortingfield=(icol==6)?'startdatestr':'enddatestr'; obj.sort(comparedate); console.debug(obj); var gridobj = jquery("#"+sortingevent.gridid); var textonpager=$('#'+sortingevent.pagerid+' .ui-paging-info').text(); gridobj.cleargriddata(); $.each(obj,function(i,row){ $("#"+sortingevent.gridid).jqgrid('addrowdata',row.id,row); //appends data row row grid }); $('#'+sortingevent.pagerid+' .ui-paging-info').text(textonpager); $('span#sp_1_'+sortingevent.pagerid).text(numberofpages); //shows total pages $('#'+sortingevent.pagerid+' .ui-pg-input').val(pagenumber); return 'stop'; } }; /** * method called when click on link updating headline */ clickmethod=function(id){ if(id!=null && typeof id != 'undefined') window.location = "/kiss/portal/yoadmintool/suppliercommodity/suppliercommoditydetail/"+id+"/"; else window.location = "/kiss/portal/yoadmintool/suppliercommoditylist"; }; /* * method gets called on pagination. */ var paginationevent=function(pgbutton){ pagenumber=$('#suppliercommoditypager .ui-pg-input').val(); var gridobj = jquery("#suppliercommoditylist"); gridobj.cleargriddata(); get_supplier_commodity_details(pagenumber-1); }; gridcompletefunction=function(){ var noofrecordperpage=jquery("#suppliercommoditylist").jqgrid('getgridparam', 'records'); if(sortingflag){ if(numberofpages==1){ $('#suppliercommoditypager .ui-paging-info').text('view '+ 1 +' - '+ noofrecordperpage+ ' of '+noofrecordperpage); }else if(numberofpages==(parseint(pagenumber)+1)){ var minrecord=numberofrecords-noofrecordperpage+1; var maxrecord=numberofrecords; $('#suppliercommoditypager .ui-paging-info').text('view '+ minrecord +' - '+ maxrecord+ ' of '+numberofrecords); }else if(numberofpages==0){ }else if(numberofpages!=1){ var minrecord=(noofrecordperpage*pagenumber)+1; var maxrecord=noofrecordperpage*(parseint(pagenumber))>numberofrecords?noofrecordperpage :noofrecordperpage*(parseint(pagenumber)); $('#suppliercommoditypager .ui-paging-info').text('view '+minrecord +' - '+ maxrecord+ ' of '+numberofrecords); } } sortingflag=false; $('.ui-state-disabled.ui-pg-button').removeclass('ui-state-disabled').addclass('ui-state-enabled');//to enable pager button }; /** * method wrap discription link updation purpose */ wraptolinkformatter=function(cellvalue, options, rowobject){ var link="<a href=\"javascript:clickmethod('"+rowobject.id+"');\">"+cellvalue+"</a>"; return link; };
i have seen the jsfiddle demo many times , wonder origin of it. problem demo really bad template. contains many small errors , shows the worst way fill jqgrid local data. please never use template real code.
the error in current code following: choosed id name of first column. id property used save rowid (the id of <tr> elements of grid). on 1 side use id: 48803 , id: 48769. on other side use $("#grid").jqgrid('addrowdata', + 1, mydata[i]);. id set i + 1 (1 , 2). values 48803 , 48769 placed in grid, id properties of internal data parameter overwritten 1 , 2 values. if change code $("#grid").jqgrid('addrowdata', data[i][0], mydata[i]); problem solved.
nevertheless strictly recommend rewrite code. should first fill mydata , create grid data: mydata abd gridview: true options. should additionally fix sorttype corresponds data use. recommend additionally use height: "auto" instead of height: 250 , include pager. current code display first 20 rows of data (rownum has default value 20) , user not able see next page.
Comments
Post a Comment