so, trying use jqgrid , cannot seem navgrid display. have searched , tried many things, none of have worked. not sure going on. appreciated. here code:
<html> <title>user list</title> <head> <meta charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="../../jqgrid/js/themes/lightness/jquery-ui.custom.css"></link> <link rel="stylesheet" type="text/css" media="screen" href="../../jqgrid/css/ui.jqgrid.css"></link> <link rel="stylesheet" type="text/css" media="screen" href="../shared/base.css" /> <script src="../../jqgrid/js/jquery-2.2.0.min.js" type="text/javascript"></script> <script src="../../jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="../../jqgrid/js/jquery.jqgrid.min.js" type="text/javascript"></script> </head> <body> </div> <script type="text/javascript"> $(function () { $('#usergrid').jqgrid({ pager:'#userpager', url: 'getuserlistdata.php', mtype: 'get', datatype: 'json', colnames:['rec id', 'user id', 'name', 'email', 'type'], colmodel:[ {name:'rec_id', hidden: true }, {name:'user_id', width: 100, sortable: true, editable: true, search: true }, {name:'user_name', sortable: true, editable: true, search: true }, {name:'email_address', editable: true }, {name:'user_type', width: 60, sortable: true, editable: true, search: true }], viewrecords: true, width: 630, gridview: true, altrows: true, sortname: 'user_name', sortorder: 'asc', rownum: 10 }); }); jquery("#usergrid").jqgrid('navgrid', '#userpager', { add: true, edit: true, del: true }); </script> <table id="usergrid"><tr><td></td></tr></table> <div id="userpager"></div> </body> </html> thanks help.
your code calls navgrid out of block $(function () {...});, origin of problem. result try create navigator bar before grid created.
th solve problem need move call of navgrid 1 line before (inside of $(function () {...});).
you should consider use jsonreader: { id: "rec_id" } , remove unneeded hidden column rec_id. don't wrote version of jqgrid use.
i recommend move script inside of <head>. alternatively can move after <table id="usergrid"><tr><td></td></tr></table><div id="userpager"></div> , remove $(function () {...}); block.
Comments
Post a Comment