jqGridでテーブルを表示したいのですが全くきれいに表示されていません。どこが原因となっているのでしょうか。
jQueryUI、jqGridに関しては下記をダウンロードして使用しています。
・jQueryUI ( http://jqueryui.com/download/ )
・jqGrid ( http://www.trirand.com/blog/?page_id=6 )
あとjQueryに関してはGoogleのCDNより取得しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JPGrid</title>
  <link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css"/>
  <link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid-bootstrap-ui.    css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script type="text/javascript" src="jquery-ui/jquery-ui-1.12.1.custom/jquery-ui.min.js"></scri    pt>
  <script type="text/javascript" src="jqGrid/js/i18n/grid.locale-en.js"></script>
  <script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js"></script>
</head>
<body>
  <table id="sample1"></table>
  <div id = "pager1"></div>
  <script>
    //列の設定
    var colModelSettings= [
    {name:"radio",index:"radio",width:50,align:"center",classes:"radio_class"},
    {name:"no",index:"no",width:70,align:"center",classes:"no_class"},
    {name:"name",index:"name",width:200,align:"center",classes:"name_class"},
    {name:"age",index:"age",width:200,align:"center",classes:"age_class"},
    {name:"local",index:"local",width:200,align:"center",classes:"local_class"},
    {name:"hobby",index:"hobby",width:200,align:"center",classes:"hobby_class"}
    ]
    //列の表示名
    var colNames = ["","No.","name","age","local","hobby"];
    //テーブルの作成
    $("#sample1").jqGrid({
      data:date,  
      datatype : "local",         
      colNames : colNames,        
      colModel : colModelSettings,
      rowNum : 10,                
      rowList : [1, 10, 20],      
      caption : "Sample Display", 
      height : 200,               
      width : 500,                
      pager : 'pager1',           
      shrinkToFit : true,        
      viewrecords: true           
    });

    var date = [
    {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
    {no:2,name:"nakayama",age:20,local:"Japan",hobby:"Soccer"},
    ];
  </script>
</body>
</html>