jQuery的网格按钮不显示

Question

The buttons on my jqGrid won't show (back, forward, first page, last page, search, etc...).

Image:

Code:

<h3><?php echo $title?></h3>
<?php $lastbids = SchedulesData::GetLatestBids(); print_r($lastbids);?>
<link rel="stylesheet" type="text/css" media="screen" href="website/lib/js/jqgrid/css/ui.jqgrid.css" />
<script src="website/lib/js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="website/lib/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>

<table id="grid"></table>
<div id="pager"></div>
<br />

<script type="text/javascript">
$("#grid").jqGrid({
   url: 'website/schedules/schedulegrid',
   datatype: 'json',
   mtype: 'GET',
   colNames: ['Code', 'Flight Num', 'Departure', 'Arrival', 'Aircraft', 'Distance', 'Route',
                'Bid'],
   colModel : [
        {index: 'code', name : 'code', width: 40, sortable : true, align: 'center', search: 'true', searchoptions:{sopt:['eq','ne']}},
        {index: 'flightnum', name : 'flightnum', width: 65, sortable : true, align: 'center', searchoptions:{sopt:['eq','ne']}},
        {index: 'depicao', name : 'depicao', width: 60, sortable : true, align: 'center',searchoptions:{sopt:['eq','ne']}},
        {index: 'arricao', name : 'arricao', width: 60, sortable : true, align: 'center',searchoptions:{sopt:['eq','ne']}},
        {index: 'a.name', name : 'aircraft', width: 100, sortable : true, align: 'center',searchoptions:{sopt:['in']}},
        {index: 'distance', name : 'distance', width: 100, sortable : true, align: 'center', searchoptions:{sopt:['lt','le','gt','ge']}},
        {index: 'route', name : 'route', width: 100, sortable : true, align: 'center',searchoptions:{sopt:['in']}},
        {index: '', name : '', width: 100, sortable : true, align: 'center', search: false}
    ],
    pager: '#pager', rowNum: 25,
    sortname: 'flightnum', sortorder: 'asc',
    viewrecords: true, autowidth: true,
    height: '100%'

});

jQuery("#grid").jqGrid('navGrid','#pager', 
    {edit:false,add:false,del:false,search:true,refresh:true},
    {}, // edit 
    {}, // add 
    {}, //del 
    {multipleSearch:true} // search options 
); 

function showroute(schedule_id)
{
    $('#jqmdialog').jqm({
        ajax:'website/schedules/viewmap?type=schedule&id='+schedule_id
    }).jqmShow();
}

function addbid(id)
{
    $.post("http://website/schedules/addbid", { id: id },
            function() 
            { 
                $("#grid").trigger("reloadGrid"); 
            }
        );
}

function removebid(id)
{
        $.post("http://website/schedules/removebid", { id: id },
            function() 
            { 
                $("#grid").trigger("reloadGrid"); 
            }
        );

}
</script>

I looked at some other posts on stack overflow, but none of them seemed to work for me. How can I get the buttons to show up?

Answer 1

You have to include some jQuery UI CSS file. For example:

<link rel="stylesheet" type="text/css"
      href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" />

See example in the documentation .