jquery - データベースから jquery グリッドにデータをフェッチする

Question

<table id="grid"></table>

<script>
                            $("#grid").jqGrid({
                                datatype:"local",
                                height:250,
                                colNames:['ROLL','FIRST_NAME','LAST_NAME','DATE OF BIRTH','CLASS'],
                                colModel:[{name:'id',index:'id', width:70, sorttype:"int"}, 
                                        {name:'fname',index:'fname', width:120},
                                        {name:'lname',index:'lname', width:120},
                                        {name:'dob',index:'dob', width:160, align:"right"}, 
                                        {name:'clas',index:'clas', width:90, align:"right"}],
                                        caption:"LIST OF STUDENTS",
                                        multiselect:true,
                            });

                            var mydata = [ {id:"1",fname:"abc",lname:"dfg",dob:"11-10-1991",clas:"second"},
                                            {id:"2",fname:"xyz",lname:"dfg",dob:"11-10-1991",clas:"second"}];

                            for(var i=0;i<=mydata.length;i++) 
                                    jQuery("#grid").jqGrid('addRowData',i+1,mydata[i]);

                        </script>

データベースからデータを取得し、グリッド テーブルを動的にしたいと考えています。

つまり、動的に jquery グリッドにデータを追加する方法は?

それ、どうやったら出来るの ？？