如何快速更改PbootCMS分页样式

我们知道PbootCMS分页标签中部分为固定样式的代码段。如{page:bar}，{page:numbar}等。

有的时候我们需要更改其class名称或部分结构，通过更改后台分页部分的php代码可以很好的实现，但是这种方式一方面不利于更新，另一方面，需要修改的内容也比较繁琐。那么有没有更好的方式可以实现呢？

通过JS可以很好的实现这一点。

一、处理{@page:numbar}样式

<script>
//处理{@page:numbar}样式
$(".page-num").each(function() {
 var txt = $(this).text();
 var url = $(this).attr("href") ? $(this).attr("href") : 'javascript:;';
 var curr = '';
  if ($(this).hasClass("page-num-current")) {
    curr = "page_item_current"; //当前页样式
  }
  //单项样式
  $(this).replaceWith('<span class="page_items"><a href="' + url + '" class="page_button ' + curr + '">' + txt + '</a></span>')
});
</script>

二、处理{@page:numbar}

<script>
    //处理{@page:numbar}样式
    $(".page-num").each(function() {
        var txt = $(this).text();
        var url = $(this).attr("href") ? $(this).attr("href") : 'javascript:;';
        var curr = '';
        if ($(this).hasClass("page-num-current")) {//当前样式
            $(this).replaceWith('<span>' + txt + '</span>')
        }else{
            $(this).replaceWith('<a href="' + url + '">' + txt + '</a>') //单项样式
        }
    });
</script>

三、处理完整分页条样式{page:bar}

<script>
    var pagedom = $("ul.pagination"); //此处填写外层dom类名
    //处理非分页数据
    pagedom.children().each(function(){
        var txt = '';
        var url = '';
        if($(this).hasClass("page-status")){
            txt = $(this).text();
        }else{
            txt = $(this).children("a").text();
            url = $(this).children("a").attr("href");
        };
        // console.log(txt);
        //处理总信息
        if($(this).hasClass("page-status")){
            $(this).hide();
        };
        //处理首页链接
        if($(this).hasClass("page-index")){
            $(this).replaceWith('<li class="page-item first"><a href="'+url+'" class="page-link">首页</a></li>') //单项样式
        };
        //处理上一页链接
        if($(this).hasClass("page-pre")){
            $(this).replaceWith('<li class="page-item prev"><a href="'+url+'" class="page-link">上一页</a></li>') //单项样式
        };
        //处理下一页链接
        if($(this).hasClass("page-next")){
            $(this).replaceWith('<li class="page-item next"><a href="'+url+'" class="page-link">下一页</a></li>') //单项样式
        };
        //处理尾页链接
        if($(this).hasClass("page-last")){
            $(this).replaceWith('<li class="page-item last"><a href="'+url+'" class="page-link">尾页</a></li>') //单项样式
        };
    });
    // pagedom.children(".page-status").hide();
    //处理首页
    pagedom.children(".page-numbar").children().each(function() {
        var txt = $(this).text();
        var url = $(this).attr("href") ? $(this).attr("href") : 'javascript:;';
        var curr = 'active';
        if ($(this).hasClass("page-num-current")) {//当前样式
            $(this).replaceWith('<li class="page-item '+curr+'"><a href="' + url + '" class="page-link">' + txt + '</a></li>')
        }else{
            $(this).replaceWith('<li class="page-item"><a href="' + url + '" class="page-link">' + txt + '</a></li>') //单项样式
        }
    });
</script>