kintone 次のページボタンをカスタマイズするサンプル

kintoneのページングボタンはシンプル過ぎて、スマホやタブレットでPC用画面を利用する際などにクリックが押しにくいと感じたことはないでしょうか。以下はそんなオリジナルのページングボタンを作成するサンプルです。

HTML

<div style="margin: 15px 0;text-align: center;">
<span id=”btn_prev_page” class="btn_paging">前のページ</span>
<span id=”btn_next_page” class="btn_paging">次のページ</span>
</div>

//一覧画面表示時のイベント
kintone.events.on('app.record.index.show', function(event){

	// kintoneの仕様の「 < 」(前のページへボタン)が表示されていたら、カスタマイズしたボタンも表示 if ( $('.gaia-ui-listtable-pagercomponent-prev').length > 0 ) {
		if ( $('.gaia-ui-listtable-pagercomponent-prev').attr('class').indexOf('pager-disable') > 0 ){
			$('#btn_prev_page').css('display','none');
		}else{
			$('#btn_prev_page').css('display','inline');
		}
	}

	// kintoneの仕様の「 > 」(次のページへボタン)が表示されていたら、カスタマイズしたボタンも表示
	if ( $('.gaia-ui-listtable-pagercomponent-next').length > 0 ) {
		if ( $('.gaia-ui-listtable-pagercomponent-next').attr('class').indexOf('pager-disable') > 0 ){
			$('#btn_next_page').css('display','none');
		}else{
			$('#btn_next_page').css('display','inline');
		}
	}

	// ページングボタン用　リンク先URL生成
	var url   = location.href;
	var now_url = url;
	var now_offset = 0;
	if (url.indexOf("#offset=") > 0){
		var url_parameters = url.split("#offset=");
		var url_params   = url_parameters[1].split("&");
		now_offset = url_params[0];
		now_url = url.replace( "#offset=" + now_offset + "&" , "").replace( "#offset=" + now_offset , "");
	}

	// カスタマイズした「前のページ」ボタンをクリックしたときのイベント
	$('#btn_prev_page').off('click');
	$('#btn_prev_page').on('click', function() {
		location.href = now_url + "#offset=" + ( Number(now_offset) - 20 );
	});

	// カスタマイズした「次のページ」ボタンをクリックしたときのイベント
	$('#btn_next_page').off('click');
	$('#btn_next_page').on('click', function() {
		location.href = now_url + "#offset=" + ( Number(now_offset) + 20 );
	});
});	

CSS

.btn_paging {
    background-color: #269;
    margin: 20px;
    padding: 15px;
    color: #fff;
    font-size: 14pt;
    font-weight: bold;
    cursor: pointer;
}