JQGrid标题“加倍”

Question

I am having a problem with my first jqGrid implementation. The grid is rendering and loading data. Paging is working. However, the grid header is shown twice. Once as a fixed header. And also as the first row in the scroll area. I am using MySql 5.5.11 as the data source, PHP 5.3.6, jQuery 1.6.1., and JqGrid 4.0.0.

The PHP code that backends the grid looks like this:

// Processed based on the action.
switch ($lAction)
{
    case "LOAD":

    $page = $_POST['page']; // get the requested page
    $limit = $_POST['rows']; // get how many rows we want to have into the grid
    $sidx = $_POST['sidx']; // get index row - i.e. user click to sort
    $sord = $_POST['sord']; // get the direction

    $lDB = new DBConnection();

    $lTable         = "tblWebRequests";
    $lGridColumns   = "id,fname,lname,company,phone,email,reqfor";


    $lGrid = new DBDataGrid($lDB, $lTable, $lGridColumns, 1, 5);

    $response->page     = $page;
    $response->total    = $lGrid->GetTotalPages();
    $response->records  = $lGrid->GetTotalItems();
    $currentPageItems   = $lGrid->GetCurPageItems();

    for($i=0;$i<count($currentPageItems);$i++) 
    {
        $response->rows[$i]['id']=$currentPageItems[$i]['id'];
        $response->rows[$i]['cell']=array(
        $currentPageItems[$i]['id'],
        $currentPageItems[$i]['fname'],
        $currentPageItems[$i]['lname'],
        $currentPageItems[$i]['company'],
        $currentPageItems[$i]['email'],
        $currentPageItems[$i]['phone'],
        $currentPageItems[$i]['reqfor']


        );
    }    

    echo json_encode($response);            

    break;

The HTML looks as follows:

<!-- Stylesheet includes. -->
<style type="text/css" media="screen">
@import url("css/main.css");    
@import url("css/start/jquery-ui-1.8.13.custom.css");       
@import url("css/ui.jqgrid.css");       
</style>

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>;
<script type="text/javascript" src="js/grid.locale-en.js"></script>;
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>;

<div class="contentwide">
<div id="databuttons">
<p></p>
<!-- end databuttons  --></div>
<div id="datasection">
    <table id="datatable">

    </table>

<!-- end datasection  --></div>
<p></p><p></p>
<div id="datapager">

    <script type="text/javascript">
        $('#datatable').jqGrid({
            url:'php/DataGridMgr.php',
            datatype: 'json',
            mtype: 'POST',
            colNames:['ID','First','Last','Company','Email','Phone','Request For'],
            colModel:
            [    
                {name:'id',index:'id',width:5,editable:false,hidden:true},     
                {name:'fname',index:'fname', width:20,editable:false,sortable:false},
                {name:'lname',index:'lname', width:20,editable:false,sortable:false},
                {name:'company',index:'company', width:35,editable:false,sortable:false},
                {name:'email',index:'email', width:35,editable:false,sortable:false},
                {name:'phone',index:'phone', width:20,editable:false,sortable:false},
                {name:'reqfor',index:'reqfor', width:25,editable:false,sortable:false}
            ],
            rowNum:5,
            rowList:[],
            imgpath: 'css/start/images', //alters buttons
            pager: $('#datapager'),
            pginput: true,
            sortname: 'id',
            viewrecords: true,
            sortorder: "asc",
            //caption:"Pending Requests",
            width:945,
            height:150,  
            onSelectRow: function(id)
            {
                alert(id);
            }
            //editurl:""
        });



    </script>
<!-- end datapager --></div>

I am sure I am missing something simple. I have searched to no avail for a resolution. Any help would be appreciated.

Answer 1

The json response should have page, total, records (count), and then only the data with NO header. It's odd to have the script within the pager div I would move it out and down. Also should add this line to the javascript: jQuery("#datatable").jqGrid('navGrid','#datapager',{edit:false,add:false,del:fal‌​se});

Also I don't use PHP/MySQL (I use asp.net) but it looks like you're hardcoding the page values?

$lGrid = new DBDataGrid($lDB, $lTable, $lGridColumns, 1, 5);