[StaticTable編](6)改ページ

##このサンプルはStaticTableの改ページの設定方法です。
###ステップ1：Static Tableの表示をする画面と関数を作成します。
###ステップ2：Static Tableの表示を確認します。

##ステップ1：Static Tableの表示をする画面と関数を作成します。

#####1-1．＜画面＞ー＜画面レイアウト作成＞の画面を開き、「新規」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/80d37c13-a26b-fb32-0e80-0e95b8125bab.png)


#####1-2．「画面名」にStaticTable1を入力、「管理ID」にStaticTable1を入力し、ボタンタイプの項目数に1を入力し、「保存して次へ」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/c0d19368-9929-b2c1-a288-c8867673df1f.png)

#####1-3．「フォルダ追加管理」ダイアログボックスが表示されます。画面の登録対象フォルダを選択して「登録」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/4f100ae3-2a18-92d0-d676-ae22fee9b4f6.png)　　


#####1-4．＜画面＞－＜画面レイアウト作成＞の画面を開き、画面レイアウト設計「StaticTable1」行の「編集」ボタンをクリックし、「画面レイアウト設計」画面を表示します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/704e7275-ae7d-b60f-ad87-ec5225cd3158.png)

#####1-5．「画面デザイン」画面が表示されます。この画面で項目の移動、変更などが自由に行えます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/28ae4172-8997-3b0c-c423-f2aa6a220c46.png)
「閉じる」ボタンを右クリックし削除を左クリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/1a709bab-9940-364a-3365-8422d1b39e77.png)

「btn2」ボタンを右クリックします。「項目定義」をクリックし項目名「btn2」を「検索」変更します。「保存」ボタンをクリックして変更を保存します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/d553935a-3c86-cd35-4315-df9548ccc849.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/6eb299e1-4acb-a9a8-062c-9a300388a675.png)

ツールバーで「項目追加」ボタンをクリックします。項目名と項目IDを入力し「表示種類」に「表」を選びます。そして、「保存」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/d49d49e9-0249-36cc-df77-40bcb1d47250.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/e2b3f733-21cb-a62d-baa6-1ae13aa2f4d2.png)

表設定を行います。「表データ件数」に「複数件」を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/a12f2f8c-db2d-9a85-609e-1d7082bf05b0.png)


作成した表に3列を追加します。「ITEM1」を左クリックし選択します。「ITEM1」を右クリックし「列の挿入」を左クリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/85ade056-c8b6-d87d-0ef3-3382f1abf512.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/dfa62721-4236-397d-6c75-924de3f30b75.png)

「ITEM1」を左クリックし選択します。「ITEM1」を右クリックし「コントロール設定」を左クリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/35ea000f-6de1-8607-7a2b-43de818118a5.png)

「項目名」を入力し、「保存」ボタンをクリックします。ほかのタイトルも同じように設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/a39e92fb-8d0f-dc7f-2690-8380c065cf5b.png)

下図の通りに設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/67d9b65b-337e-7408-9089-8a692e65a3ec.png)

３行目の「ITEM1」を左クリックし選択します。「ITEM1」を右クリックし「行削除」を左クリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/d4af26cf-7513-c90c-8244-12f89947d6b9.png)

削除した後「社員ID」下のセル「ITEM1」をダブルクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/4449cd89-1166-d564-fd45-72dc492ed76f.png)

キーボードの「Backspace」で値を削除します。同じ行のセルも削除設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/3e74e612-f33b-f0c8-1324-0da10ec36dc0.png)

「給料」下のセルを左クリックし選択します。セルを右クリックし「コントロール設定」を左クリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/f2226670-c8f5-c583-e2fc-32a045a705c6.png)

項目名を入力、「書式設定->横寄せ」に「右」を選んで保存します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/291e351f-8886-8901-7e7f-2baab1f2050c.png)

キーボードの「Backspace」で項目名1を削除します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/112f7891-3bfd-c665-6666-4ed1bc556fb5.png)

ツールバーで「項目追加」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/90206641-9ca9-a549-3199-98558664ad3a.png)

項目名を入力し、「表示種類」に「Textbox」を選びます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/40d50444-4bcb-b975-25ed-19f10a1da80f.png)

ツールバーで「項目追加」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/8ce7bc33-f8a7-9706-e4e7-36de6a69f37e.png)
項目名を入力し、「表示種類」に「Textbox」を選びます。「デフォルト値」に1を入力して「保存」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/d5eba60d-f177-a07f-68b5-df86a4737cb5.png)
ツールバーで「項目追加」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/5e4baf1f-311d-e1ca-936d-db172731f7ca.png)
項目名を入力し、「表示種類」に「ボタン」を選びます。「保存」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/627872e5-be5e-0e96-238d-890d02f7ed94.png)
自由に項目の移動、変更などができます。「保存」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/d5c66c07-580f-e995-0f08-ccb0721756c9.png)


#####1-6．関数作成
```javascript:statictable_sample5
var st1 = getStaticTable("static4");
var strSql = new StringBuilder();
var strSqlCount = new StringBuilder();
var param = [1];
var al = null;
var b1 = null;
var row = null;
var userID = getObj('txt36'); //条件;
var week = "";
var yakushoku;
var stopFlg = false;
var pageChangeVal = getObj("txt38");
try {
    strSql.setLength(0);
    strSql.append("SELECT ID, NAME, DEPT, AGE, SALARY FROM EMPLOYEE ");
    //検索条件:社員ID
    if (userID != null && userID != "") {
        strSql.append(" WHERE ID  LIKE '%" + userID + "%'");
    }
    strSql.append(" ORDER BY ID");
    //検索のSQL文を追加
    if (pageChangeVal != "") {
        strSql.append(" LIMIT ").append(StringUtil.ChangeIntToString(parseInt((parseInt(pageChangeVal) - 1) * 2, 10))).append(",").append("2");
    }
    strSqlCount.setLength(0);
    strSqlCount.append("SELECT COUNT(*) FROM EMPLOYEE");
    // 日報承認データ取得
    al = exequeryarrylist(strSql.toString());
    b1 = exequery(strSqlCount.toString());
    //var dataNum = b1
    if (al != null && al.size() > 0) {
        var list = new ArrayList();
        //var strint = 0.0;
        for (var i = 0; i < al.size(); i++) {
            var maptimuzhou = new HashMap();
            var keibItemBean = new ItemBean();
            row = al.get(i);
            keibItemBean = new ItemBean();
            keibItemBean.setValue(row.get(0));
            // 社員ID
            maptimuzhou.put("lbl15", keibItemBean);
            keibItemBean = new ItemBean();
            keibItemBean.setValue(row.get(1));
            // 社員名
            maptimuzhou.put("lbl17", keibItemBean);
            keibItemBean = new ItemBean();
            keibItemBean.setValue(row.get(2));
            // 所属
            maptimuzhou.put("lbl35", keibItemBean);
            keibItemBean = new ItemBean();
            keibItemBean.setValue(row.get(3));
            // 年齢
            maptimuzhou.put("lbl29", keibItemBean);
            keibItemBean = new ItemBean();
            keibItemBean.setValue(row.get(4));
            // 給料
            maptimuzhou.put("lbl23", keibItemBean);
            list.add(maptimuzhou);
        }
        //　改ページボタンの実現
        pageChangeStr = getStaticTablePaging(b1, 2, pageChangeVal, "btn4", "txt38");
        ActStr += "$('#dragB40').html('" + pageChangeStr + "');";
        //　表のすべての項目情報を設定
        st1.setData(list);
        st1.addBreakConditionByParams("lbl35", "lbl35,lbl29");
        st1.addBreakCondition("lbl29", "lbl29");
        ActStr += "" + JsUtil.saasforce_item2js(st1, true, null);
    } else {
        var list = new ArrayList();
        var map = new HashMap();
        list.add(map);
        ActStr = "alert('該当データは存在しません。');";
    }
} catch (e) {
    trace(e);
    ActStr = "alert('検索時エラーが発生しました。システム管理者にご連絡してください。[" + e + "]');";
}
```
検索関数の作成：
＜ツール＞－＜ユーザー定義関数＞の画面を開き、中央上の「検索条件」ボタンをクリックします。左から2番目「新規」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/233a618d-c36a-8003-1028-75f627dce77f.png)
「プロパティ定義」画面にて、「関数名称」を入力、「利用範囲」に「詳細画面利用関数」を選択、「関数利用画面」に「P00030-StaticTable1」を選択し、「処理方式」に「同期処理」をチェック、「実行場所」に「サーバー」をチェックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/b1bf869b-2380-809f-22ba-0686841f0599.png)

「関数編集」画面にて、関数をコピーします。関数コードvar userID行とvar pageChangeVal行のgetObject()の引数は右側の「項目ID」と同じです。 maptimuzhou.put()の引数「lbl15」はタイトル「社員ID」下の項目IDと同じです。maptimuzhou.put()他の引数も同じように設定します。改ページボタンの実現の所getStaticTablePaging()の引数「btn4」は「検索」ボタンの「項目ID」です。第二行目の「dragB40」は「改ページ」の番号です。「保存」ボタンをクリックして、「関数ID」を取得できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/6ce5d6fb-d167-f138-2ff9-cd698b26cf7d.png)


＜画面＞－＜画面レイアウト作成＞の画面を開き、「StaticTable1」行の「編集」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/89498389-4335-7b07-3b1c-ef6ea6dec603.png)

「画面デザイン」にて、検索ボタンを右クリックしてコード表示を左クリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/572fd654-5ab3-be76-e131-0cb1937134b5.png)

「関数タイプ」に「詳細画面利用関数」を選択し、関数名称が自動に表示されます。「保存」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/b5775cff-b946-f12d-63bb-daeb5f92eebc.png)
##ステップ2：Static Tableの表示を確認します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/4df6606a-2510-0d00-f6b2-ec599e41f56e.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184885/b2fe2328-a0ba-3631-1701-d0026a8aec89.png)