当前位置： 移动技术网 > IT编程>开发语言>.net > 超好用轻量级MVC分页控件JPager.Net

超好用轻量级MVC分页控件JPager.Net

2017年12月12日  | 移动技术网IT编程  | 我要评论

BR757,安极论坛,开讲啦汪涵

jpager.net  mvc好用的轻量级分页控件，好用到你无法想象，轻量到你无法想象。

jpager.net  mvc好用的轻量级分页控件，实现非常简单，使用也非常简单。

jpager.net  mvc好用的轻量级分页控件，代码精心推敲，经多人反复建议修改，最终成型使用中。非常好用分享给大家。源代码一共放出来。先上个效果图：

jpager.net  mvc好用的轻量级分页控件jpager.net .dll核心代码

pagerinbase.cs

namespace jpager.net
{
  /// <summary>
  /// 分页基础类
  /// </summary>
  public class pagerinbase
  {
    /// <summary>
    /// 当前页
    /// </summary>
    public int pageindex { get; set; }

    /// <summary>
    /// 页数
    /// </summary>
    public int pagesize { get; set; }

    //跳过序列中指定数量的元素
    public int skip => (pageindex - 1) * pagesize;

    /// <summary>
    /// 请求url
    /// </summary>
    public string requeturl => system.web.httpcontext.current.request.url.originalstring;

    /// <summary>
    /// 构造函数给当前页和页数初始化
    /// </summary>
    public pagerinbase()
    {
      if (pageindex == 0) pageindex = 1;
      if (pagesize == 0) pagesize = 10;
    }
  }
}

pagerresult.cs

using system;
using system.collections.generic;
using system.text;

namespace jpager.net
{
  /// <summary>
  /// ulr拼装
  /// </summary>
  internal static class exts
  {
    public static string geturl(this string url, int curindex, int reps)
    {
      return url.replace("pageindex=" + curindex.tostring(), "pageindex=" + reps.tostring());
    }
  }

  /// <summary>
  /// 分页核心代码
  /// </summary>
  /// <typeparam name="t"></typeparam>
  public class pagerresult<t>
  {
    public int code { get; set; }
    public int total { get; set; }
    public ienumerable<t> datalist { get; set; }     
    public int pagesize { get; set; }
    public int pageindex { get; set; }
    public string requesturl { get; set; }

    /// <summary>
    /// 分页页码html
    /// </summary>
    /// <param name="cssclass">默认样式：jpager</param>
    /// <returns></returns>
    public string pagerhtml(string cssclass="jpager")
    {
      if (pageindex == 0) pageindex = 1;
      if (requesturl.indexof("?", stringcomparison.ordinal) == -1) requesturl += "?pageindex=1";
      else
      if (requesturl.indexof("&pageindex", stringcomparison.ordinal) == -1&& requesturl.indexof("?pageindex", stringcomparison.ordinal) == -1) requesturl += "&pageindex=1";
      
      var html = new stringbuilder();
      html.appendformat("<span class='{0}'>", cssclass);
      var pagelen = math.ceiling((double)total / pagesize);
      html.appendformat("<a href='{0}'> 首页 </a>", requesturl.geturl(pageindex,1));
      html.appendformat("<a href='{0}'> 上页 </a>", requesturl.geturl(pageindex, pageindex < 2 ? 1 : pageindex - 1));

      var si = pageindex <= 6 ? 1 : pageindex - 5;
      var ei = si + 9;

      while (si <= pagelen && si <= ei)
        html.appendformat(
          si == pageindex
            ? "<a style='color:black;border:none;' href='{0}'> {1} </a>"
            : "<a href='{0}'> {1} </a>", requesturl.geturl(pageindex, si), si++);

      html.appendformat("<a href='{0}'> 下页 </a>", requesturl.geturl(pageindex, (int)(pageindex > pagelen - 1 ? pagelen : pageindex + 1)));

      html.appendformat("<a href='{0}'> 尾页 </a>",
        math.abs(total) <= 0 
        ? requesturl.geturl(pageindex, 1) 
        : requesturl.geturl(pageindex, (int) pagelen));

      html.append(@"</span>");
      return html.tostring();

    }
    
  }

}

使用方法：

homecontroller.cs

using system;
using system.collections.generic;
using system.linq;
using system.web.mvc;
using jpager.net;
using jpager.net.web.models;

namespace jpager.net.web.controllers
{
  public class homecontroller : controller
  {
    public actionresult index(userparams param)
    {

      //每页显示的条数默认10
      //param.pagesize = 10;

      //保存搜索条件
      viewbag.searchname = param.name;
      viewbag.searchage = param.age;

      //获取数据集合
      var list = pagecontent(); 

      //根据条件检索
      var query = param.name!=null ? 
        list.where(t=>t.name.contains(param.name)).tolist() :
        list.tolist();

      //分页数据
      var data = query.skip(param.skip).take(param.pagesize);

      //总页数
      var count = query.count;

      var res = new pagerresult<user> { code = 0, datalist = data, total = count,
        pagesize = param.pagesize,pageindex = param.pageindex,requesturl = param.requeturl};
      return view(res);
    }
     
    //测试数据                        
    public list<user> pagecontent()
    {
      var list = new list<user>();
      for (var t = 0; t < 10000; t++)
      {
        list.add(new user
        {
          id = t,
          name = "joye.net"+t.tostring(),
          age = t + 10,
          score = t,
          address = "http://yinrq.cnblogs.com/",
          addtime = datetime.now
        });
      }

      return list;
    }
  }
}

models文件夹建user.cs和userparams.cs

user.cs

using system;
using system.collections.generic;
using system.linq;
using system.web;

namespace jpager.net.web.models
{
  public class userparams:jpager.net.pagerinbase
  {
    public int id { get; set; }
    public string name { get; set; }
    public int ? age { get; set; }
    public int score { get; set; }
    public string address { get; set; }
    public datetime addtime { get; set; }
  }
}

userparams.cs

using system;

namespace jpager.net.web.models
{
  public class user
  {
    public int id { get; set; } 
    public string name { get; set; }
    public int age { get; set; }
    public int score { get; set; }
    public string address { get; set; }
    public datetime addtime { get; set; }
  }
}

view显示

@model jpager.net.pagerresult<jpager.net.web.models.user>
@{
  viewbag.title = "index";
}

<h2>jpager.net mvc好用的轻量级分页控件</h2>
<div>
  <div>
    <form method="get">name：
      <input name="name" id="name" />
     age：
      <input name="age" id="age"/>
      <input type="submit" value="查询" />
    </form>
  </div>
  <table>
    <tr>
      <th>id</th>
      <th>name</th>
      <th>age</th>
      <th>score</th>
      <th>address</th>
      <th>addtime</th>
    </tr>
    @foreach (jpager.net.web.models.user item in model.datalist)
    {
      <tr>
        <td>@item.id</td>
        <td>@item.name</td>
        <td>@item.age</td>
        <td>@item.score</td>
        <td><a href="@item.address" target="_target">@item.address</a></td>
        <td>@item.addtime</td>
      </tr>
    }
  </table>

</div>
<div>
  @html.raw(model.pagerhtml()) 共 @model.total 条
</div>

<script type="text/javascript">
  //保持搜索条件
  $(function () {
    $('#name').val('@viewbag.searchname');
    $('#age').val('@viewbag.searchage');
  });
</script>

github:https://github.com/decadestory/jpager.net 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网