AJAXスクリプトの読み込みと設定
DedeCMSのarclistタグで非同期ページングを実現するには、まずテンプレートの<head>セクションでAJAX通信用のスクリプトを読み込み、ページ切り替え用の関数を定義します。
<script type="text/javascript" src="{dede:global.cfg_cmsurl/}/include/dedeajax2.js"></script>
<script>
function fetchPagedContent(pageNumber, listId) {
var contentArea = document.getElementById(listId);
var navArea = document.getElementById("page_" + listId);
var reqContent = new DedeAjax(contentArea, false, false, '', '', '');
reqContent.SendGet2("/plus/arcmulti.php?mtype=0&pnum=" + pageNumber + "&tagid=" + listId);
var reqNav = new DedeAjax(navArea, false, false, '', '', '');
reqNav.SendGet2("/plus/arcmulti.php?mtype=1&pnum=" + pageNumber + "&tagid=" + listId);
DedeXHTTP = null;
}
</script>テンプレートでのタグ設定
次に、コンテンツを表示するarclistタグと、ページネーションを表示するarcpagelistタグを記述します。この2つのタグのtagid属性は必ず一致させる必要があります。ここではmainListという識別子を使用します。
{dede:arclist typeid='14' titlelen='200' row='100' tagid='mainList' pagesize='5'}
<li>
<p><a href="[field:arcurl/]" target="_blank">[field:title/]...</a></p>
<p>[field:pubdate function="MyDate('Y-m-d',@me)"/]</p>
</li>
{/dede:arclist}
{dede:arcpagelist tagid='mainList'/}ページネーションロジックのカスタマイズ
デフォルトのページ番号表示のマークアップを変更するには、include/taglib/arcpagelist.lib.php内のページ生成関数を編集します。以下は、前後のページへのリンクやページ番号のリストを生成するカスタム関数の例です。
function generatePaginationMarkup($totalCount, $activePage, $itemsPerPage, $listId='')
{
if ($totalCount == 0) return "";
$totalPages = ceil($totalCount / $itemsPerPage);
// 最初のページ
$homeLink = ($activePage <= 1) ? "<span>[最初]</span>" : "<a href='javascript:fetchPagedContent(1,\"{$listId}\")' title='1ページへ'><span>[最初]</span></a>";
// 最後のページ
$endLink = ($activePage >= $totalPages) ? "<span>[最後]</span>" . $activePage : "<a href='javascript:fetchPagedContent(" . $totalPages . ",\"{$listId}\")' title='{$totalPages}ページへ'><span>[最後]</span></a>";
// 前のページ
$prevLink = ($activePage <= 1) ? "<span>[前へ]</span>" : "<a href='javascript:fetchPagedContent(" . ($activePage - 1) . ",\"{$listId}\")' accesskey='p' title='前のページ'><span>[前へ]</span></a>";
// 次のページ
$nextLink = ($activePage >= $totalPages) ? "<span>[次へ]</span>" : "<a href='javascript:fetchPagedContent(" . ($activePage + 1) . ",\"{$listId}\")' title='次のページ'><span>[次へ]</span></a>";
// ページ情報
$pageInfo = " 全 {$totalPages} ページ 全 {$totalCount} 件";
// ページ番号のリスト生成
$pageLinks = "";
$pageLinks .= $homeLink;
$pageLinks .= $prevLink;
$startOffset = max(1, $activePage - 4);
$endOffset = min($totalPages, $activePage + 8);
for ($i = $startOffset; $i <= $endOffset; $i++) {
if ($i == $activePage) {
$pageLinks .= "<a href='javascript:void(0)' class='current-page'><span>{$i}</span></a>";
} else {
$pageLinks .= " <a href='javascript:fetchPagedContent({$i},\"{$listId}\")' title='{$i}ページへ'><span>{$i}</span></a> ";
}
}
$pageLinks .= $nextLink;
$pageLinks .= $endLink;
$pageLinks .= $pageInfo;
return $pageLinks;
}CSSによるスタイリング
最後に、テンプレートの<head>内にCSSを追加してページネーションの見た目を整えます。
<style>
* {
padding: 0;
margin: 0;
}
.pagination-wrapper {
font-size: 12px;
font-family: "メイリオ", sans-serif;
color: #666666;
text-align: center;
padding-left: 20px;
box-sizing: border-box;
}
.pagination-wrapper span {
min-width: 30px;
height: 28px;
border: 1px solid #dce0e0 !important;
text-align: center;
margin: 0 4px;
cursor: pointer;
line-height: 28px;
color: #666666;
font-size: 13px;
display: inline-block;
background-color: #fff;
}
.pagination-wrapper a {
text-decoration: none;
}
.pagination-wrapper .current-page span {
background-color: #f0f0f0;
font-weight: bold;
}
</style>テンプレート側でCSSクラスを適用してページネーションを呼び出します。
<div class="pagination-wrapper">
{dede:arcpagelist tagid='mainList'/}
</div>