基于jQuery与C# MVC的自定义分页组件实现

自定义分页组件概述

鉴于市面上现有的分页插件未能完全满足需求，本文分享了一套自行开发的分页方案，该方案设计灵活，能够与MVC框架及数据库良好配合使用。

具体实现效果如下图所示。

首先定义CSS样式，若现有风格不符合项目要求，开发者可忽略此部分并自定义样式。

.pagelist {padding:10px 0; text-align:center;}
.pagelist span,.pagelist a{ border-radius:3px; border:1px solid #dfdfdf;display:inline-block; padding:5px 12px;}
.pagelist a{ margin:0 3px;}
.pagelist span.current{ background:#09F; color:#FFF; border-color:#09F; margin:0 2px;}
.pagelist a:hover{background:#09F; color:#FFF; border-color:#09F; }
.pagelist label{ padding-left:15px; color:#999;}
.pagelist label b{color:red; font-weight:normal; margin:0 3px;}
.popup 
{
  display: none;
  list-style-type: none; 
  overflow: hidden;
  position: absolute;
}
/*显示弹出菜单*/
.popupmenu li:hover ul {
  display: block;
  z-index:2;
  /*left:840px;*/
}
.popupmenu li ul:hover {
  display: block;
  z-index:2;
  /*left:840px;*/
}

在HTML结构中，需引入jQuery库以支持后续脚本交互。

<div class="pagelist" style="margin-top:500px">

  <ul class="popupmenu">
    <li>
      <a href="p.url?page=1" rel="external nofollow" >首页</a>
      <a href="p.url?page=p.up" rel="external nofollow" >上一页</a>
      <a id="pop" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="popup()">1/2</a>
      <ul id="popup" class="popup">
        <li>
          <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1/2</a>
        </li>
        <li>
          <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2/2</a>
        </li>
      </ul>
      <a href="p.url?page=p.next" rel="external nofollow" >下一页</a>
      <a href="p.url?page=p.sum" rel="external nofollow" >尾页</a>
    </li>
  </ul>

</div>

接下来是核心的JavaScript逻辑，负责处理分页交互与动态定位。

<script type="text/javascript">
  // 获取id为pop的元素的位置
  var popX = $('#pop').offset().left;
  // alert($('#pop').height());
  var popY = $('#pop').offset().top;
  var lineheight = $('#pop').height();
  var linumber = $('#popup li').length;
  // alert(lineheight);
  // 设置id为popup元素的位置
  $("#popup").css({ "position": "fixed", "top": (popY - (linumber * 27.5)) + "px", "left": (popX - 23) + "px", "line-height": lineheight + "px" });

</script>

后端提供一个C#分页类，用于封装页码、URL及导航状态等数据。

public partial class page
 {
   // 当前页
   public int pagenow { get; set; } 
   // 总页数
   public int sum { get; set; }
   // 地址
   public string url { get; set; }
   // 上一页
   public int up { get; set; }
   // 下一页
   public int next { get; set; }
 }

集成使用指南

实际使用时，只需在MVC控制器中获取数据，利用分页类生成相关参数，并替换HTML中对应的占位元素即可生效。

以上内容为本文的全部分享，希望能为读者的学习提供参考，欢迎继续支持本站获取更多技术资源。