How to paginate style in dedecms

If you want to know more about dedecms, you can click: DEDECMS tutorial

1. Introduce the following code into the head of the HTML template header file:

<script language="javascript" type="text/javascript" src="{dede:global.cfg_cmsurl/}/include/dedeajax2.js"></script>
        <script>
        function multi(pagenum,tagid)
        {
            var taget_obj = document.getElementById(tagid);
            var taget_obj_page = document.getElementById("page_"+tagid);
            myajax = new DedeAjax(taget_obj,false,false,&#39;&#39;,&#39;&#39;,&#39;&#39;);
            myajax.SendGet2("/plus/arcmulti.php?mtype=0&pnum="+pagenum+&#39;&tagid=&#39;+tagid);
            myajax = new DedeAjax(taget_obj_page,false,false,&#39;&#39;,&#39;&#39;,&#39;&#39;);
            myajax.SendGet2("/plus/arcmulti.php?mtype=1&pnum="+pagenum+&#39;&tagid=&#39;+tagid);
            DedeXHTTP = null;
        }
        </script>

The above is a reference to the AJAX function to realize the page turning function.

2. Make the tag code for the template page:

{dede:arclist typeid='14' titlelen='200' row='100' tagid='index' pagesize='5'}
        <li>
            <p><a href="[field:arcurl/]" target="_blank">[field:title/]...</a></p>
            <p>[field:pubdate function="MyDate(&#39;Y-m-d&#39;,@me)"/]</p>
        </li>
       {/dede:arclist}

   {dede:arcpagelist tagid=&#39;index&#39;/}

The tagid="index" in the above two sets of tags must correspond to

Refresh the page and the number 123 will appear

3. Make page turning style

Find the file dede\include\taglib\arcpagelist.lib .php

Find the method function multipage and modify the page turning style here

The following is a broken code that can be copied directly

function multipage($allItemTotal, $currPageNum, $pageSize, $tagid='')
{
    if ($allItemTotal == 0) return "";

    //计算总页数
    $pagesNum = ceil($allItemTotal/$pageSize);

    //第一页显示
    $firstPage = ($currPageNum <= 1) ? "<span>[首页]</span>" : "<a href=&#39;javascript:multi(1,\"{$tagid}\")&#39; title=&#39;第1页&#39;><span>[首页]</span></a>";

    //最后一页显示
    $lastPage = ($currPageNum >= $pagesNum)? "<span>[尾页]</span>". $currPageNum : "<a href=&#39;javascript:multi(". $pagesNum . ",\"{$tagid}\")&#39; title=&#39;第". $pagesNum ."页&#39;><span>[尾页]</span></a>";

    //上一页显示
    $prePage  = ($currPageNum <= 1) ? "<span>[上一页]</span>" : "<a href=&#39;javascript:multi(". ($currPageNum-1) . ",\"{$tagid}\")&#39;  accesskey=&#39;p&#39;  title=&#39;上一页&#39;><span>[上一页]</span></a>";

    //下一页显示
    $nextPage = ($currPageNum >= $pagesNum) ? "<span>[下一页]</span>" : "<a href=&#39;javascript:multi(". ($currPageNum+1) .",\"{$tagid}\")&#39; title=&#39;下一页&#39;><span>[下一页]</span></a>";

    //共X页 共X条记录
    $pagesNum2 = "  共 ".$pagesNum." 页  共 ".$allItemTotal." 条记录";

    //按页显示
    $listNums = "";
    $listNums.= $firstPage;
    $listNums.= $prePage;
    for ($i=($currPageNum-4); $i<($currPageNum+9); $i++) {
        if ($i < 1 || $i > $pagesNum) continue;
        if ($i == $currPageNum)
        {
            $listNums.= "<a href=&#39;javascript:void(0)&#39; class=&#39;thislink&#39;><span>".$i."</span></a>";
        }else 
        {
            $listNums.= " <a href=&#39;javascript:multi(". $i .",\"{$tagid}\")&#39; title=&#39;". $i ."&#39;><span>". $i ."</span></a> ";
        }
    }
    $listNums.= $nextPage;
    $listNums.= $lastPage;
    $listNums.= $pagesNum2;

    $returnUrl = $listNums;
    return $returnUrl;
}

The effect after refreshing: [Homepage][ Previous page]12345[Next page][Last page]

3. Make CSS pagination style

In the middle of the template header file head Add the following code:

<style>
* {
    padding: 0;
    margin: 0;
}
/*
  * 外面盒子样式---自己定义
  */

.page_div {
    font-size: 12px;
    font-family: "microsoft yahei";
    color: #666666;
    margin-right: 10px;
    padding-left: 42px;
    box-sizing: border-box;
}
/*
 * 页数按钮样式
 */

.page_div 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;
}
</style>

4. Call the CSS style:

<div class="page_div" align="center">
    {dede:arcpagelist tagid=&#39;index&#39;/}
</div>

The above is the detailed content of How to paginate style in dedecms. For more information, please follow other related articles on the PHP Chinese website!