jquery - jqGrid not display properly

Question

I am using jQuery grid plugin , jqGrid, to show an array of data.

What I want to achieve is 1. by default, that grid is empty. 2. when user clicks the search button, it will use AJAX to load data 3. data will load into grid.

From the attachment, I have this error

1. grid width is not 100% px , it is two small
2. pager is not show up. how to use method to control pager ?

how to fix it ? have any samples ?

Thanks

<h2>Search</h2>
<form id="project_search_form">
<table class="grid">
...
    <tr>        
        <td><a  class="form_button" onclick="searchProject();" href="#">search</a></td> 
    </tr>
</table>
</form>


<table id="projectList"></table> 
<div id="projectPager"></div>

<script type="text/javascript">

$(document).ready(function(){

    jQuery("#projectList").jqGrid({ 
        url:'server.php?q=2', 
        datatype: "json", 
        colNames:['ID','Name'], 
        colModel:[ {name:'projectId',index:'id', width:55} , {name:'name',index:'name', width:55}], 
        rowNum:10, 
        rowList:[10,20,30], 
        pager: '#pager5', 
        sortname: 'id', 
        viewrecords: true, 
        sortorder: "desc", 
        caption:"Simple data manipulation", 
        editurl:"someurl.php" }).navGrid("#projectPager",{edit:false,add:false,del:false}); 
});

function searchProject(){
    var param =  $('#project_search_form').serialize();
     BaseAjaxUtil.object_search(param, 
              {
                 callback:function(data){                        
                     var jsongridRows = eval("("+data+")");

                     for(var i = 0; i < jsongridRows.length; i++) {
                        var datarow = jsongridRows[i];      
                        var su=jQuery("#projectList").jqGrid('addRowData',i+1, datarow); 
                        // if(su) alert("Succes. Write custom code to add data in server"); else alert("Can not update");
                     }

                 },
                 errorHandler:function(errorString) { alert("error:"+errorString); }            
                }
              );        
}
</script>

Answer 1

オプションを使用してautowidth: true幅を制御できます。jqGrid ドキュメントから:

true に設定すると、グリッド幅は親要素の幅に自動的に再計算されます。これは、グリッドが作成されたときの最初にのみ行われます。親要素の幅が変更されたときにグリッドのサイズを変更するには、カスタム コードを適用し、この目的のために setGridWidth メソッドを使用する必要があります。

次に、親要素が適切な幅であることを確認する必要があります。