working jqGrid Example

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="mytable"></table>

JavaScript

$(document).ready(function() {
   jQuery("#mytable").gridDnD();
    jQuery("#mytable").sortableRows();   
    jQuery("#mytable").jqGrid({
      datatype:"clientSide",
      data:[ {"number": 1, "segment":"first", "name": "chap0"},
             {"number": 2, "segment":"second",  "name": "chap1"},
             {"number": 3, "segment":"third",  "name": "chap2"},
           ],
      colNames:['Chapter Name', 'Chapter Number', 'Document Segment'],
      colModel:[
              {name:'name'},
              {name:'number', sorttype:'number'},
              {name:'segment'},
              ],
      autowidth:true,
      height:'200',
      sortname: 'number',
      viewrecords: true,
      caption: 'My first grid',
      altRows:true,
        
  }); 
          
        });