

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

[code]

    <!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>
    
[/code]


CC BY-SA 3.0
2017-07-03T15:47:08.870
36075
2020-10-14T01:05:00.540
17348
question
javascript jquery css html5
jqGridでテーブルが表示できない。


データの宣言部とjqGridの生成部の順番が逆かと思います。  
jqGridは変数の変更を検知して動的にデータ部を生成するものではないと思います。

[code]

    var date = [
      {no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
      {no:2,name:"nakayama",age:20,local:"Japan",hobby:"Soccer"},
    ];
    //テーブルの作成
    $("#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           
    });
    
[/code]


CC BY-SA 3.0
2017-07-11T02:28:04.500
36264
2017-07-11T02:28:04.500
22665
36075
answer