CATEGORY

JavaScriptでページネーション実装【ライブラリなし】

今回の記事では、自作ページネーションのコードをご紹介します。
検索エンジン内には、jQueryやVueなどのフレームワークに依存した実装方法の紹介記事が多かったので、
汎用性を意識して、生のJSで処理を組んでみました。

■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】

ゴール

まずは完成形のイメージをご確認ください。(Resultタブのみで閲覧してみてください)
1ページにつき3つの要素を表示させるように実装しました。

See the Pen JavaScriptでページネーション by waibandl321 (@JumCode) on CodePen.

ソースコード

結論だけ先に知りたい方のために、まずはソースコードの全体像を共有します。
JSの親要素部分を書き換えれば、共通して動作します。(※HTML, CSSも併用してください)

// 表示要素 DOM操作用定数
const contents = document.querySelector('.contents');
const redraw_elements = document.querySelectorAll('.contents > div');

// ページネーション DOM操作用の定数
const total_el = document.querySelector('.total_counter');
// const page_counter = document.querySelector('.page_counter');
const prev_btn = document.querySelector('.prev');
const next_btn = document.querySelector('.next');
const count = 3;

// グローバル変数
let current_step;
let index_start;
let index_end;


// ページ数を算出
function split_page(current_step_update)
{
    total_step = Math.ceil(redraw_elements.length / count);
    if( current_step_update === undefined || current_step === 1) {
        current_step = 1;
        next_btn_disable(); prev_btn_active();
    } else if( current_step_update === total_step ) {
        next_btn_active(); prev_btn_disable();
    } else {
        current_step = current_step_update;
        next_btn_disable(); prev_btn_disable();
        console.log(current_step);
    }

    total_el.textContent = current_step + '/' + total_step;
    redraw(redraw_elements.length, total_step, current_step, count);
}

// DOMの描画
function redraw(total, total_step, current_step, count)
{
    // 現在の表示indexを割り出す
    index_start = current_step * count - count;
    index_end = current_step * count - 1;
    let index_array = [];
    for (let i = index_start; i < index_end + 1; i++) {
        index_array.push(i);
    }

    // 一時削除
    while( contents.lastChild ) {
        contents.lastChild.remove();
    }

    // 再描画
    redraw_elements.forEach((element, index) => {
        if(index_array.indexOf(index) != -1) {
            contents.appendChild(element);
        }
    });
}


// ページカウンターの作成
function create_page_counter()
{
    for (let i = 1; i < Math.ceil(redraw_elements.length / count) + 1; i++) {
        let count_list = document.createElement('li');
        count_list.setAttribute('data-counter-id', i);
        count_list.classList.add('page_number');
        count_list.textContent = i;
        page_counter.appendChild(count_list);
    }
}


// イベント処理
next_btn.addEventListener('click', () => {
    split_page(current_step += 1);
});

prev_btn.addEventListener('click', () => {
    split_page(current_step -= 1);
});


// class付与・削除関数
prev_btn_active = () => {
    prev_btn.classList.add('disable');
}
prev_btn_disable = () => {
    prev_btn.classList.remove('disable');
}
next_btn_disable = () => {
    next_btn.classList.remove('disable');
}
next_btn_active = () => {
    next_btn.classList.add('disable');
}


// DOMの構築が完了したタイミングでページネーション発火
window.addEventListener('DOMContentLoaded', () => {
    split_page();
    create_page_counter();
    document.querySelectorAll('.page_number').forEach((element, index) => {
        element.addEventListener('click', function(e) {
            current_step = Number(element.getAttribute('data-counter-id'));
            split_page(current_step);
        })
    });
})

■ 関連記事 : JavaScriptの基礎習得に役立つ技術書【おすすめ3選】

解説

ここからは手順と処理内容について解説していきます。
下記の5つの手順で実装を行なっていけば問題なく実装できます。

処理順

  • グローバルな定数、変数を定義する
  • DOMの読み込みが完了したらページネーションを発火する
  • ページ数を算出する
  • DOMを再描画する
  • ページネーションのイベント処理を実装する

グローバルな定数、変数を定義する

ページネーションはDOM操作を多用する関係で、使用する要素についてはグローバルな定数・変数で定義しておきます。
表示要素とその親要素、1ページに表示させる要素数、ページネーションの各要素などが該当します。

変数については、各描画処理で割り当てる値が動的に変化するので、グローバル定義では値は定義していません。

// 表示要素 DOM操作用定数
const contents = document.querySelector('.contents');
const redraw_elements = document.querySelectorAll('.contents > div');

// ページネーション DOM操作用の定数
const total_el = document.querySelector('.total_counter');
// const page_counter = document.querySelector('.page_counter');
const prev_btn = document.querySelector('.prev');
const next_btn = document.querySelector('.next');
const count = 3;

// グローバル変数
let current_step;
let index_start;
let index_end;

DOMの読み込みが完了したらページネーションを発火する

ページネーションの処理(関数)を、DOMContentLoadedイベントの発生タイミングで実行するための記述です。

window.addEventListener('DOMContentLoaded', () => {
    split_page();
    create_page_counter();
    document.querySelectorAll('.page_number').forEach((element, index) => {
        element.addEventListener('click', function(e) {
            current_step = Number(element.getAttribute('data-counter-id'));
            split_page(current_step);
        })
    });
})

ページ数を算出する

ここでは、total_stepという変数に合計のページ数を割り当て、
current_stepで、現在のページ番号を定義しています。

引数のcurrent_step_updateは、ページネーションの「次へ」「前へ」のボタンがクリックされた際に渡される値です。
ページの詳細情報を定義した後に、DOMの再描画関数(redraw())に処理を渡します。

function split_page(current_step_update)
{
    total_step = Math.ceil(redraw_elements.length / count);
    if( current_step_update === undefined || current_step === 1) {
        current_step = 1;
        next_btn_disable(); prev_btn_active();
    } else if( current_step_update === total_step ) {
        next_btn_active(); prev_btn_disable();
    } else {
        current_step = current_step_update;
        next_btn_disable(); prev_btn_disable();
    }

    total_el.textContent = current_step + '/' + total_step;
    redraw(redraw_elements.length, total_step, current_step, count);
}

DOMを再描画する

ここでは一度、DOM要素を全てリセットし、1ページに表示させる要素のみを描画しています。
index_start, index_endでページごとの要素を割り出し、
forEachのループ処理時に、各要素のindex番号と一致した要素のみ描画します。

そうすることで、各ページごとに3要素ずつ表示させることができます。

function redraw(total, total_step, current_step, count)
{
    // 現在の表示indexを割り出す
    index_start = current_step * count - count;
    index_end = current_step * count - 1;
    let index_array = [];
    for (let i = index_start; i < index_end + 1; i++) {
        index_array.push(i);
    }

    // 一時削除
    while( contents.lastChild ) {
        contents.lastChild.remove();
    }

    // 再描画
    redraw_elements.forEach((element, index) => {
        if(index_array.indexOf(index) != -1) {
            contents.appendChild(element);
        }
    });
}

ページネーションのイベント処理を実装する

「次へ」や「前へ」のボタンが押された際の、イベントを定義しています。
といってもクリックされたら、現在のページ番号に + -して、描画関数を実行するのみです。

// イベント処理
next_btn.addEventListener('click', () => {
    split_page(current_step += 1);
});

prev_btn.addEventListener('click', () => {
    split_page(current_step -= 1);
});


// class付与・削除関数
prev_btn_active = () => {
    prev_btn.classList.add('disable');
}
prev_btn_disable = () => {
    prev_btn.classList.remove('disable');
}
next_btn_disable = () => {
    next_btn.classList.remove('disable');
}
next_btn_active = () => {
    next_btn.classList.add('disable');
}

自作した印象として、結構簡単でした。

これまで、jquery.pagination.jsやPagination.jsのライブラリを使用していましたが、
100行ほどのコードで実装できるのであれば、ライブラリを使用する必要性はないですね。

サイトパフォーマンスも向上するので、
他のライブラリに頼っている実装も、自作できないか検証してみようと思います。

【WordPress】一般設定に項目を追加する方法を解説 前の記事 【WordPress】特定ページのみカスタムフィールドを追加する方法 次の記事

関連記事

コメント

この記事へのトラックバックはありません。