団塊爺ちゃんの備忘録

PROGRAMMING

一覧

javascript CSS PHP Java

javascript

CSS

PHP

Java

ページャーを作る 4/4

「ページャーを作る」の最終ページです。

  ページャーを作る 1/4   1. ページャー用関数を準備 2. プロパティやメソッドの追加（各要素を生成）
  ページャーを作る 2/4   3. プロパティやメソッドの追加（スタイルの設定）
  ページャーを作る 3/4   4. プロパティやメソッドの追加（イベント登録）
  ページャーを作る 4/4   5. プロパティやメソッドの追加（イベントのクロスブラウザ対策） 6. プロパティやメソッドの追加（ページャー表示用メソッド） 7. ページャーの使い方

MkenPagerのダウンロード(mkenPager.js)
mkenPager.zip

5.プロパティやメソッドの追加（イベントのクロスブラウザ対策）

おきまりのＩＥ対策。

addListener: function(elm, ev, listener){
	if(elm.addEventListener) {		// IE以外
		elm.addEventListener(ev, listener, false);
	} else if(elm.attachEvent) {	// IE
		elm.attachEvent('on' + ev, listener);
	} else {
		throw new Error('イベントリスナーに未対応です。');
	}
},

6.プロパティやメソッドの追加（ページャー表示用メソッド）

いままでのメソッドを集めて、ひとつのページャー表示用メソッドにしてあります。
インスタンスの後にこのメソッドを呼び出してページャーを使用します。

showPager: function(){
	this.createHTML(); // 各要素を生成
	this.setStyle();   // スタイルをセット
	this.setEvent();   // イベントをセット
}

7.ページャーの使い方

このページのページャーサンプルではidがpagingのdivに表示させています。
データの件数は100件、1ページの表示件数は7件で呼び出ししています。

<head>
	<meta charset="UTF-8">
	<title>団塊爺ちゃんの備忘録</title>
	<link rel="stylesheet" href="index.css">
	<script src="jquery-1.8.0.min.js"></script>
	<script src="mkenPager.js"></script>
	<script src="index.js"></script>
</head>
<body>
	<div id="paging"></div> <!--ページャーの表示場所-->

var tagId = "paging";
// データの総件数が100件で１ページに7件づつ表示の場合
var pager = new MkenPager(tagId, 100, 7);
// ページャーの表示
pager.showPager();

// ここからページャー用イベント
// 各ページをクリック
$("#" + tagId + " li").on("click", function(){
	action();
});
// 「前へ」ボタンクリック
$("#" + tagId + "Prev").on("click", function(){
	action();
});
// 「次へ」ボタンクリック
$("#" + tagId + "Next").on("click", function(){
	action();
});
// マイナスボタンクリック
$("#" + tagId + "Minus").on("click", function(){
	action();
});
// プラスボタンクリック
$("#" + tagId + "Plus").on("click", function(){
	action();
});
function action(){
	var msg = 'このページの先頭の行番号は'+pager.currentRow +'行目です。';
	alert(msg);
}

7行目から下がページャーのイベントで、jQueryでイベントを追加しています。
アプリ側で必要なデータはページャーの各プロパティから取得します。
ページの先頭の行番号：pager.currentRow
などです。