巧用JQuery改变默认的分页样式

View: Share:

“ &lt; ”和“ &gt; ”对应显示的是符号“ < ”和“ > ”,在网页美观的角度上看,似乎略显单调不雅致。


方法二:利用jquery前端技术修饰分页样式(dtmo.cn官网示例)

在使用DTcms开源系统建站时发现,无论是前台还是后台,默认的分页样式显示的都是统一的格式,如果建多语言版本的网站时,显然这种单一格式就不适用了,而我们找到默认分页样式所在的位置(DTcms.Common/Utils.cs),改变其格式的话,后台的分页样式也随之改变,可谓是“牵一发而动全身”。今天小编就通过自己建站时总结的一些小技巧,给大家介绍以下两种方法:


1.前台分页样式



2.后台列表分页样式



       DTcms的“«上一页”和“下一页»”按钮,默认是中文,而英文版出现中文字体显然不合乎情理,根据DTcms.Common/Utils.cs/找到显示分页所在位置,默认的分页样式,不仅是前台所显示的,而且还包括后台管理列表的分页所显示的,所以修改“显示分页”的代码,需要兼顾前后台的样式。


方法一:DTcms.Common/Utils.cs/显示分页

public static string OutPageList(int pageSize, int pageIndex, int totalCount, string linkUrl, int centSize)
{
    ...
    StringBuilder pageStr = new StringBuilder();
    string pageId = "__id__";
    string firstBtn = "<a href=\"" + ReplaceStr(linkUrl, pageId, (pageIndex - 1).ToString()) + "\"> &lt; </a>";
    string lastBtn = "<a href=\"" + ReplaceStr(linkUrl, pageId, (pageIndex + 1).ToString()) + "\"> &gt; </a>";
    string firstStr = "<a href=\"" + ReplaceStr(linkUrl, pageId, "1") + "\">1</a>";
    string lastStr = "<a href=\"" + ReplaceStr(linkUrl, pageId, pageCount.ToString()) + "\">" + pageCount.ToString() + "</a>";

    if (pageIndex <= 1)
    {
        firstBtn = "<span class=\"disabled\"> &lt; </span>";
    }
    if (pageIndex >= pageCount)
    {
        lastBtn = "<span class=\"disabled\"> &gt; </span>";
    }
    if (pageIndex == 1)
    {
        firstStr = "<span class=\"current\">1</span>";
    }
    if (pageIndex == pageCount)
    {
        lastStr = "<span class=\"current\">" + pageCount.ToString() + "</span>";
    }
    int firstNum = pageIndex - (centSize / 2); //中间开始的页码
    if (pageIndex < centSize)
        firstNum = 2;
    int lastNum = pageIndex + centSize - ((centSize / 2) + 1); //中间结束的页码
    if (lastNum >= pageCount)
        lastNum = pageCount - 1;
    pageStr.Append("<span>共" + totalCount + "记录</span>");
    ...
}

“ < ”和“ > ”对应显示的是符号“ < ”和“ > ”,在网页美观的角度上看,似乎略显单调不雅致。

方法二:利用jquery前端技术修饰分页样式(dtmo.cn官网示例)


<script>
    $(function () {	    
        $(".pages > span:first-child").remove("span");
        $(".pages > :first").html("<i class='fa fa-chevron-left'></i>");
        $(".pages > :last").html("<i class='fa fa-chevron-right'></i>");
    });
</script>

<style>
    .pages{height:35px;text-align:left;font-family:Arial,'Microsoft YaHei';font-size:12px;line-height:35px}
    .pages a{padding:0 15px;color:#969696;margin-right:5px;text-decoration:none;background:#fff;border-radius:1px;display:inline-block}
    .pages i{line-height:35px;vertical-align:middle}
    .pages span{padding:0 15px;display:inline-block}
    .pages span:first-child{display:none}/*隐藏总记录统计*/
    .pages a:hover{background:#ff8a00;color:#fff}
    .pages a:active{color:#fff;background-color:#03d522}
    .pages span.current{font-weight:bold;color:#fff;margin-right:5px;background-color:#03d522;border-radius:1px}
    .pages span.disabled{color:#ccc;margin-right:5px;background:#f9f9f9;border-radius:3px;}
    .pages span.disabled{display:none}/*隐藏上一页代码*/
</style>

利用jquery方法,自己diy一个前台的分页样式,利用fontawesome图标文字装饰分页效果,而且不影响全局分页样式。

你的浏览器版本过低,可能导致网站不能正常访问!
为了你能正常使用网站功能,请使用这些浏览器。


Chrome

Firefox

Safari

IE9及以上