Sorting arrows are not displaying in jqGrid

Question

I am trying to learn jqGrid. I was using demo available at this link http://www.guriddo.net/demo/guriddojs/

But I am not able to show sorting arrows in header section. Here is the code :-

<table id="jqGrid"></table>
<div id="jqGridPager"></div>

<script type="text/javascript"> 
    $(document).ready(function () {
        $("#jqGrid").jqGrid({
            url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
            mtype: "GET",
            datatype: "jsonp",
            colModel: [
                { label: 'OrderID', name: 'OrderID', key: true, width: 75, sortable: true},
                { label: 'Customer ID', name: 'CustomerID', width: 150, sortable:true },
                { label: 'Order Date', name: 'OrderDate', width: 150, sortable: true},
                { label: 'Freight', name: 'Freight', width: 150,sortable: true },
                { label:'Ship Name', name: 'ShipName', width: 150,sortable: true }
            ],
            viewrecords: true,
            width: 780,
            height: 250,
            rowNum: 20,
            pager: "#jqGridPager"
        });
    });

Answer 1

Try adding

sortable = true

$(document).ready(function () {
    $("#jqGrid").jqGrid({
        url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
        mtype: "GET",
        datatype: "jsonp",
        colModel: [
            { label: 'OrderID', name: 'OrderID', key: true, width: 75, sortable: true},
            { label: 'Customer ID', name: 'CustomerID', width: 150, sortable:true },
            { label: 'Order Date', name: 'OrderDate', width: 150, sortable: true},
            { label: 'Freight', name: 'Freight', width: 150,sortable: true },
            { label:'Ship Name', name: 'ShipName', width: 150,sortable: true }
        ],
        viewrecords: true,
        width: 780,
        height: 250,
        rowNum: 20,

        //Add the code here 
        sortable: true,

        pager: "#jqGridPager"
    });

});

You can also set default sort order through

sortname: "OrderID"

sortorder: "asc" //this is default

The code will be

$(document).ready(function () {
$("#jqGrid").jqGrid({
    url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
    mtype: "GET",
    datatype: "jsonp",
    colModel: [
        { label: 'OrderID', name: 'OrderID', key: true, width: 75, sortable: true},
        { label: 'Customer ID', name: 'CustomerID', width: 150, sortable:true },
        { label: 'Order Date', name: 'OrderDate', width: 150, sortable: true},
        { label: 'Freight', name: 'Freight', width: 150,sortable: true },
        { label:'Ship Name', name: 'ShipName', width: 150,sortable: true }
    ],
    viewrecords: true,
    width: 780,
    height: 250,
    rowNum: 20,

    //Add the code here 
    sortable: true,
    sortname: "OrderID",
    sortorder: "asc",

    pager: "#jqGridPager"
});

});