zoukankan      html  css  js  c++  java
  • 自己写一个分页PageHelper

    每次写分页导航的时候都要在html页面写一堆标签和样式,太麻烦了,所以干脆自己动手封装一个自己喜欢的类直接生成。

    一、PageHelper类:

     /// <summary>
            /// 分页导航
            /// </summary>
            /// <param name="pageNum">当前第几页</param>
            /// <param name="pageNumSum">总页数</param>
            /// <param name="url">显示的url</param>
            /// <param name="p">分页参数名</param>
            /// <param name="linCount">显示多少页</param>
            /// <returns></returns>
            public static string page(int pageNum, int pageNumSum, string url, string p, int linCount)
            {
                if (pageNum < 1) pageNum = 1;
                if (pageNum > pageNumSum) pageNum = pageNumSum;
                // a的样式 
                string aStyle = "text-decoration:none;border:1px solid #075DB3;box-sizing:border-box;margin:0  2px;padding:2px 5px;font-size:12px;";
                StringBuilder sb = new StringBuilder();
                sb.AppendLine(string.Format("<div style='text-align:center;margin-bottom:30px;'>第<span style='color:#00ff21'>{0}</span>/{1} 页", pageNum, pageNumSum));
                sb.AppendLine(string.Format(" <a style='{0}' href='{1}?{2}={3}'>上一页</a>", aStyle, url, p, pageNum - 1 < 1 ? 1 : pageNum - 1));
                //设开始页为1
                int beginPage = 1;
                //中间页为 linCount/2
                int midPage = linCount / 2;
                if (pageNum > midPage)
                {
                    beginPage = pageNum - midPage;
                }
                for (int i = 0; i < linCount; i++)
                {
                    //当前页不加链接
                    if (pageNum == beginPage + i)
                    {
                        sb.AppendLine(string.Format("<span style='display: inline-block;10px;'></span>{0}<span style='display: inline-block;10px;'></span>", beginPage + i));
                    }
                    else
                    {
                        sb.AppendLine(string.Format("<a style='{0}' href='{1}?{2}={3}'>{3}</a>", aStyle, url, p, beginPage + i));
                    }
                    //如果后面的页数大于总页数,退出循环
                    if (beginPage + i >= pageNumSum)
                    {
                        break;
                    }
    
                }
                sb.AppendLine(string.Format(" <a style='{0}' href='{1}?{2}={3}'>下一页</a>", aStyle, url, p, pageNum + 1 >= pageNumSum ? pageNumSum : pageNum + 1));
                sb.Append("</div>");
                return sb.ToString();
            }

    二、演示

     这是在一个mvc项目中做的演示

       action :

     public ActionResult Index(string page)
            {
                //1.获得当前页数
                int pageNum = 1;//默认第一页
                if(page!=null)
                pageNum = Convert.ToInt32(page);  //一些判断是否为int或者是否<0大于最大页数这里不做判断,主要演示分页效果
                //2.总页数-- 查询数据库得到总条数再计算得到总页数
                int pageNumSum = 18;//假设计算得到结果为18页
                string url = "/Demo/Index"; //当前url
                //要显示多少页
                int pageList = 5;//假设看到5页
                //mvc要 MvcHtmlString 进行生成html码,不然会是一个字符串
                ViewBag.page = new MvcHtmlString(PageHelper.page(pageNum, pageNumSum, url, "page", pageList));
                return View();
               
            }

    view:

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <style type="text/css">
            p {
            text-align:center;
            color:#00ff21;
            }
        </style>
    </head>
    <body>
        <p>列表内容</p>
          <p>列表内容</p>
          <p>列表内容</p>
          <p>列表内容</p>
          <p>列表内容</p>
        <div>
            @ViewBag.page
        </div>
    </body>
    </html>

    效果:

    后言:当然这主要是说一个方法,如果觉得这个不好看,你可以自己写多几个自己喜欢的分页效果类,想用哪个就调用哪个的。

  • 相关阅读:
    uniq命令
    全局滚动条样式美化
    感受一下Java乱码出现就知道怎么解决Java乱码了
    用于注解解析的工具类
    迅为i.MX8MM开发板资料更新啦!Linux安卓9.0工业核心板
    迅为-IMX6Q开发板Buildroot文件系统nfs测试
    进步一点点丨迅为4412开发板Linux内核开发基础
    迅为RK3399开发板运行第一个Android程序
    每天学习一点丨借助U盘或TF卡拷贝程序到迅为IMX6ULL开发板上(二)
    资料完整丨i.MX6Q开发板ARM恩智浦工业级linux安卓系统迅为iMX6Q/DL Plus板
  • 原文地址:https://www.cnblogs.com/wei325/p/5241162.html
Copyright © 2011-2022 走看看