jQueryでページ送りを実装する

2019.03.16

jsonなどの情報を使って一覧表示をした際に、ページを分割してページャーで切り替えられるようにする処理をjQueryで実装してみます。

サンプルコード

今回はサンプルとしてこのようなjsonファイルを用意しました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "data": [
    {
      "title": "記事001",
      "body": "記事001の内容"
    }, {
      "title": "記事002",
      "body": "記事002の内容"
    },
    〜 略 〜
    {
      "title": "記事100",
      "body": "記事100の内容"
    }
  ]
}

一覧とページ送りを追加するエリアを用意します。

1
2
<div id="js-article"></div>
<div id="js-pager"></div>

JavaScriptで記事やページ送りを表示する処理を記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
var pagerOptions = {
  paramKey: 'page', // 何ページ目かを示すパラメータのキー
  articleCount: 10, // 1ページあたりに表示させる記事の件数
  pagerMaxCount: 5 // ページ送りの最大数
};
var jsonPath = 'data.json'; // 記事情報のjsonのパス
var outputArticle = "#js-article"; // 記事一覧の出力先
var outputPager = "#js-pager"; // ページ送りの出力先
 
$(function(){
  var currentNumber = get_current_page_number(pagerOptions['paramKey']);
  // ajaxで記事情報を取得
  $.ajax({
    url: jsonPath,
    cache: false
  })
  .then(
    function (data) {
      generate_article_result(data, currentNumber);
      generate_pager(data, currentNumber);
    },
    function () {
      console.log('取得に失敗しました。');
    }
  );
});
 
/**
 * ページャーの現在のページ数を取得する
 * @param {string} key (required) パラメータのkey
 */
function get_current_page_number(key) {
  // URLからパラメータ取得
  var params = [];
  var param = location.search.substring(1).split('&');
  for(var i = 0; i < param.length; i++) {
    params[i] = param[i].split('=');
  }
  var current = 1;
  for(var i = 0; i < params.length; i++) {
    if(params[i][0] === key) {
      current = parseFloat(params[i][1]);
      break;
    }
  }
  return current;
}
 
/**
 * 記事の表示
 * @param {object} articleData (required) 記事情報
 * @param {array}  current     (required) 現在のページ数
 */
function generate_article_result(articleData, current) {
    var data = articleData['data'];
    var first = (pagerOptions['articleCount'] * (current - 1));
    var ins = '';
    for (var i = first; i < Math.min(first + pagerOptions['articleCount'], data.length); i++) {
      ins += '<div class="article">';
        ins += '<p class="article_ttl">';
          ins += data[i]['title'];
        ins += '</p>';
      ins += '</div>';
    }
    $(outputArticle).html(ins);
}
 
/**
 * ページャーの表示
 * @param {object} articleData (required) 記事情報
 * @param {array}  current     (required) 現在のページ数
 */
function generate_pager(articleData, current) {
  var data = articleData['data'];
  var articleCount = data.length;
  var pagerLength = Math.ceil(articleCount / pagerOptions['articleCount']);
  var pagerVisibleCount = pagerOptions['pagerMaxCount'];
  var baseUrl = './';
  baseUrl += '?' + pagerOptions['paramKey'] + '=';
 
  // 記事が0件の場合またはページャーが1件のみの場合は表示しない
  if(pagerLength <= 1) {
    return;
  }
  // 現在のページが存在しない場合は1ページ目にリダイレクト
  if(current > pagerLength) {
    location.href = baseUrl + 1;
  }
  var startNumber = 1;
  if(pagerLength <= pagerOptions['pagerMaxCount']) {
    pagerVisibleCount = pagerLength;
  } else if(current <= Math.ceil(pagerOptions['pagerMaxCount'] / 2)) {
 
  } else if(current > pagerLength - Math.ceil(pagerOptions['pagerMaxCount'] / 2)) {
    startNumber = pagerLength - pagerOptions['pagerMaxCount'] + 1;
  } else {
    startNumber = current - Math.ceil(pagerOptions['pagerMaxCount'] / 2) + 1;
  }
  var ins = '';
  ins += '<div class="pager">';
    if(current !== 1) {
      ins += '<a class="pager_first" href="' + baseUrl + '1' + '">first</a>';
      ins += '<a class="pager_prev" href="' + baseUrl + (current - 1) + '">prev</a>';
    }
    ins += '<ol class="pager_list">';
    for (var i = startNumber; i < startNumber + pagerVisibleCount; i++) {
      if(i === current) {
        ins += '<li class="pager_item is-current"><a href="' + baseUrl + i + '">' + i + '</a></li>';
      } else {
        ins += '<li class="pager_item"><a href="' + baseUrl + i + '">' + i + '</a></li>';
      }
    }
    ins += '</ol>';
    if(current !== pagerLength) {
      ins += '<a class="pager_next" href="' + baseUrl + (current + 1) + '">next</a>';
      ins += '<a class="pager_last" href="' + baseUrl + pagerLength + '">last</a>';
    }
  ins += '</div>';
  $(outputPager).html(ins);
}

3行目のarticleCountで1ページに表示する記事数、pagerMaxCountでページ送りの最大数を設定できるようにしています。
ページ送りを実装するデモページ
現在何ページ目かはURLにパラメータ(?page=X)をつけて判別するようにしています。
　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年4月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
27282930