リッチなテーブルを簡単に作成することができるライブラリ「jqGrid」を使った
・ページング
・スクロールバー
付きのテーブルの作り方。備忘録。
準備編は以下を参照。
http://qiita.com/k499778/items/65db2380d989b1d70985
##1.コーディング
jqGrid.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" media="screen" href="jqGrid/jquery-ui.min.css" rel="stylesheet" />
<link type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" rel="stylesheet" />
<script type="text/javascript" src="jqGrid/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="jqGrid/js/i18n/grid.locale-ja.js"></script>
<script type="text/javascript">
$(function() {
//列の設定
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"];
var date = [
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{no:1,name:"nakagawa",age:20,local:"Japan",hobby:"Tennis"},
{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", //データの種別 他にjsonやxmlも選べます。
//しかし、私はlocalが推奨です。
colNames : colNames, //列の表示名
colModel : colModelSettings, //列ごとの設定
rowNum : 10, //一ページに表示する行数
rowList : [1, 10, 20], //変更可能な1ページ当たりの行数
caption : "Sample Display", //ヘッダーのキャプション
height : 200, //高さ
width : 500, //幅
pager : 'pager1', //footerのページャー要素のid
regional : 'ja', //日本語
shrinkToFit : true, //画面サイズに依存せず固定の大きさを表示する設定
viewrecords: true //footerの右下に表示する。
});
});
</script>
</head>
<body>
<table id="sample1"></table>
<div id="pager1"></div>
</body>
</html>
##2.表示
参照 http://acro-engineer.hatenablog.com/entry/20110715/1310683073