MVC异步分页代码分享

如图:

1、控制器代码 

//

    // GET: /AjaxUser/

    shopEntities shop = new shopEntities();
    public ActionResult Index()
    {
      return View();
    }
    public ActionResult loadjson()

    {
      int pageSize = Request["pageSize"] == null ? 10 : int.Parse(Request["pageSize"]);
      int pageIndex = Request["pageIndex"] == null ? 1 : int.Parse(Request["pageIndex"]);
      int totalCount = shop.tbl_admin.Count();

      //给前台userinfo所有的数据,并且是json格式
      var allorder = shop.tbl_admin.OrderBy(u=>u.id)
        .Skip(pageSize*(pageIndex-1))
        .Take(pageSize)
        .ToList();
      //接受一个对像,内部把此对象使用javaScript序列化类对象志字符串,发送到前台
      var data = from u in allorder select new { u.id,u.realname,u.sex};
      string strNav = PageNavHelper.ShowPageNavigate(pageIndex,pageSize,totalCount);
      var result = new {Data=data, NavStr=strNav };
      return Json(result, JsonRequestBehavior.AllowGet);

    }

2、Html代码 

@{
  Layout = null;
}
<!DOCTYPE html>
<html>

<head>

  <meta name="viewport" content="width=device-width" />

  <title>Index</title>
  <link href="~/Content/NavPage.css" rel="stylesheet" />
  <script src="~/Scripts/jquery-1.8.2.min.js"></script>
  <script src="~/Scripts/jquery-ui-1.8.24.js"></script>
  <script src="~/Scripts/jquery.easyui.min.js"></script>
  <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
  <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
  <script type="text/javascript">
    $(function () {
      //页面加载完成后从后如加载当前页数据
      initTable();
    });

  //初始化表格数据

    function initTable(queryData) 

    {

      $.getJSON("/AjaxUser/loadjson",queryData, function (data) {
        var tb = $("#tbList");
        //先移除旧的,添加新的
        $("#tbList tr[type=data]").remove();
        for (var i = 0; i < data.Data.length; i++)
        { 

          var strTr = "<tr type='data'>";
          strTr += "<td>" + data.Data[i].id + "</td>";
          strTr += "<td>" + data.Data[i].realname + "</td>";
          strTr += "<td>" + data.Data[i].sex + "</td>";
          strTr += "<td><a UId='" + data.Data[i].id + "' href='javascript:void(0)'>修改</a>" +
            "<a UId='" + data.Data[i].ID + "' href='javascript:void(0)'>删除</a></td>";
          strTr += "</tr>";
          tb.append(strTr);

        }

        $("#Nav").html(data.NavStr);

        //绑定分页标签的点击事件

        $(".pageLink").click(function () {
          //把页码弹出来
          var strHref = $(this).attr("href");
          var queryStr = strHref.substr(strHref.indexOf('?') + 1);
          //alert(queryStr);
          initTable(queryStr);
          return false;
        });
      });
    }
  </script>

</head>
<body>
  <div>
    <table id="tbList">
      <tr>
        <td>id</td>

        <td>姓名</td>
        <td>性别</td>
        <td>操作</td>

      </tr>
    </table>
    <div id="Nav" class="paginator">
    </div>
  </div>

</body>

</html>

3、分页类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
namespace MvcTest4.Models

{
  public class PageNavHelper

  {
    //主要就是输出分页的超级链接的标签

    //自定义分页Helper扩展

    public static string ShowPageNavigate(int currentPage, int pageSize, int totalCount)
    {

      var redirectTo = HttpContext.Current.Request.Url.AbsolutePath;
      pageSize = pageSize <= 0 ? 3 : pageSize;
      var totalPages = Math.Max((totalCount + pageSize - 1) / pageSize, 1); //总页数
       var output = new StringBuilder();
      if (totalPages > 1)

      {

        //if (currentPage != 1)

        {//处理首页连接

          output.AppendFormat("<a class='pageLink' href='{0}?pageIndex=1&pageSize={1}'>首页</a> ", redirectTo, pageSize);
        }
        if (currentPage > 1)
        {//处理上一页的连接
          output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>上一页</a> ", redirectTo, currentPage - 1, pageSize);
        }

        else
        {
          // output.Append("<span class='pageLink'>上一页</span>");

        }
        output.Append(" ");
        int currint = 5;
        for (int i = 0; i <= 10; i++)
        {//一共最多显示10个页码,前面5个,后面5个
          if ((currentPage + i - currint) >= 1 && (currentPage + i - currint) <= totalPages)
          {

            if (currint == i)

            {//当前页处理

              //output.Append(string.Format("[{0}]", currentPage));

              output.AppendFormat("<a class='cpb' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage, pageSize, currentPage);
            }
            else
            {//一般页处理
              output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>{3}</a> ", redirectTo, currentPage + i - currint, pageSize, currentPage + i - currint);

            }
          }
          output.Append(" ");

        }

        if (currentPage < totalPages)
        {//处理下一页的链接
          output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>下一页</a> ", redirectTo, currentPage + 1, pageSize);
        }
        else
        {
          //output.Append("<span class='pageLink'>下一页</span>");
        }
        output.Append(" ");
        if (currentPage != totalPages)
        {
          output.AppendFormat("<a class='pageLink' href='{0}?pageIndex={1}&pageSize={2}'>末页</a> ", redirectTo, totalPages, pageSize);
        }
        output.Append(" ");
      }
      output.AppendFormat("第{0}页 / 共{1}页", currentPage, totalPages);//这个统计加不加都行

      return output.ToString();

    }

  }

}

4、分页CSS

body {
}
.paginator {
  font: 12px Arial, Helvetica, sans-serif;
  padding: 10px 20px 10px 0;
  margin: 0px;
}

  .paginator a {
    border: solid 1px #ccc;
    color: #0063dc;
    cursor: pointer;
    text-decoration: none;
  }
    .paginator a:visited {
      padding: 1px 6px;
      border: solid 1px #ddd;
      background: #fff;
      text-decoration: none;
    }
  .paginator .cpb {
    border: 1px solid #F50;
    font-weight: 700;
    color: #F50;
    background-color: #ffeee5;
  }

  .paginator a:hover {
    border: solid 1px #F50;
    color: #f60;
    text-decoration: none;
  }
  .paginator a, .paginator a:visited, .paginator .cpb, .paginator a:hover {
    float: left;
    height: 16px;
    line-height: 16px;
    min-width: 10px;
    _width: 10px;
    margin-right: 5px;
    text-align: center;
    white-space: nowrap;
    font-size: 12px;
    font-family: Arial,SimSun;
    padding: 0 3px;

  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-09-15

ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项

一直想自己做个博客网站,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之后,发现即使你用了bootstrap还是要自己写css样式,都是自学的,前端真的很垃圾,在网上找了很多UI,以下是各种UI的地址,需要的可以去看看: H-ui:http://www.h-ui.net/H-ui.admin.shtml ,是一个前端大牛弄得,模仿bootstrap,做适合中国网上的UI. Ama

asp.net分页功能实现

说一下实现分页的思路 这里的分页用到了一个组件 AspNetPage.dll,这个组件大家可以到网上去下载,我这里就不提供了 添加最近到工具箱中这样我们就可以像其他控件一样拖拽使用了 如图DataPage是在工具箱中的,至于怎么添加你们百度吧 拖拽到页面中如图 这个是我加完样式后显示的效果,怎么样是不是你们想要的了,如果不是你们还可以修改样式样式稍候奉上 先来看看要怎么使用 <webdiyer:AspNetPager ID="AspNetPager1" runat="s

ASP.NET MVC 2右键菜单和简单分页实例讲解

右键菜单非常方便,很多时候会用到.这篇文章将使用一个JQUERY的插件在ASP.NET MVC中实现右键菜单.本文还将介绍一下在ASP.NET MVC中如何实现简单的分页.效果如下图: 新建一个asp.net mvc应用程序.将此插件放入Scripts文件夹.并在页面上引用. 定义右键菜单: <div class="contextMenu" id="myMenu1"> <ul> <li id="detail">

Asp.Net中的三种分页方式总结

通常分页有3种方法,分别是asp.net自带的数据显示空间如GridView等自带的分页,第三方分页控件如aspnetpager,存储过程分页等.这里分别做总结. 第一种:使用GridView自带分页,这种是最简单的分页方法. 前台的方法: 复制代码 代码如下: <asp:GridView ID="GridView1" AllowPaging="true" runat="server" onpageindexchanging="G

一句话轻松搞定asp.net分页

rows 是客户端传过来的行数,page是页码,传参就需要就两个参数就行,sql语句中_row 和_page 自己声明的局部变量,值还是相应的row 和page ,为了运算而已. 用数据库类获得它的DataTable,转换为json格式通过一般处理程序传到客户端,客户端显示就ok了.这里我使用的是easyui datagrid进行接收和传参.这是大体的思路. string sql = "select top " + rows + " * from TestData where

ASP.NET无刷新分页简单实现

下面就是和大家分享的实现无刷新分页功能的全部步骤,欢迎学习. 1.新建一个分页存储过程: CREATE procedure [dbo].[P_Pager] (@PageNumber int, @PageSize int) as declare @sql nvarchar(4000) set @sql = 'select top ' + Convert(varchar, @PageSize) + ' * from T_Test where [type]=1 and id not in (selec

Asp.Net数据控件引用AspNetPager.dll分页实现代码

1.也许讲解有点初级,希望高手不要"喷"我,因为我知道并不是每一个人都是高手,我也怕高手们说我装13,小生不才: 2.如有什么不对的地方,还希望大家指出,一定虚心学习: 3.本文属于作者原创,尊重他人劳动成果,转载请注明作者,谢谢. 下面开讲: 第一步:首先是下载一个AspNetPager.dll 下载地址 AspNetPager.rar第二步:在项目的bin文件夹下引用AspNetPager.dll 如图: 第三步:在工具箱添加AspNetPager控件,如图: 接下来再如图: 这样

Asp.net GridView使用大全(分页实现)

GridView自带的分页功能实现: 要实现GrdView分页的功能操作如下:1.更改GrdView控件的AllowPaging属性为true.2.更改GrdView控件的PageSize属性为 任意数值(默认为10)3.更改GrdView控件的PageSetting->Mode为Numeric等(默认为Numeric)该属性为分页样式.GridView属性设置好了,从页面上也能看到分页样式. 现在开始实现分页的功能: 1.在<<asp:GridView ID=......>后添加

ASP.NET 高性能分页代码

最近给分页快搞死,记得之前曾经发过修改DW ASP分页的方法,后来又写过手工打造的ASP分页,现在进入.NET当然要配合存储过程打造纯手工高性能分页了. 为什么会叫做高性能,为什么要手工打造,不使用.NET现有的分页控件呢?这个还要追溯到我修改DW ASP分页的时候,那个我还不怎么懂程序这个东西,只会修修补补,就更不要去谈什么性能问题.当时改的很心烦,接着叫我的私人技术总监张总帮我看看,当时张总就以一种不屑一顾的眼神往着我,说了句话:值得吗? 接着到我手工打造ASP分页,又搞不下去了,张总丢给我

ASP.NET MVC分页和排序功能实现

分页和排序,应该是软件开发中,需要必知必会的技能了,对于分页,网上很多教程,当然,别人终究是别人的,只有自己理解,会了,并且吸收之后,再用自己的语言,传授出来,这才是硬道理.好了,废话说多了.现在我们进入正题: 这里,我打算使用EF Code-First方式分页控件就是用PagedList.MVC,来做分页,对于排序,实现的思路是,加载数据出来之后,默认是升序排序,然后我们点击一下相应的列标题,就按照该字段降序排序,查数据.思路明确了,就开始干吧! 1.首先新建一个空白的MVC项目,在Model

DataGrid同时具有分页和排序功能及注意点

当DataGrid同时具有分页和排序功能时应注意在重新绑定数据源时,MyDataGrid.CurrentPageIndex=0;下面给实现以上功能的原码,也就不多缀了aspx中包含有DataGrid和控制其数据源变化的dropdownlistDataGrid代码  <asp:datagrid id="MyDataGrid" runat="server" BorderColor="#CCCCCC" Font-Size="100%&q

Asp.Net MVC 分页、检索、排序整体实现代码

很多时候需要这样的功能,对表格进行分页.排序和检索.这个有很多实现的方式,有现成的表格控件.用前端的mvvm,用户控件.但很多时候看着很漂亮的东西你想进一步控制的时候却不那么如意.这里自己实现一次,功能不是高大全,但求一个清楚明白,也欢迎园友拍砖.前端是bootstrap3+jPaginate,后台基于membership.没什么难点. 先上效果图. 分页其实就是处理好 每页项目数.总项目数.总页数.当前页.为了方便复用,就先从仓库开始说起. 一.建立仓库 1.定义Ipager接口,需要分页的模

asp.net MVC分页代码分享

本文实例为大家分享了MVC分页代码,供大家参考,具体内容如下 using System.Collections.Generic; using System.Collections.Specialized; using System.Linq; using System.Web; using System.Text; using System.Web.Mvc; using System.Web.Routing; using System.Data.Objects.DataClasses; name

ASP.NET MVC分页的实现方法

在这一篇文章中,我们将学习如何在MVC页面中实现分页的方法.分页功能是一个非常实用,常用的功能,当数据量过多的时候,必然要使用分页.在今天这篇文章中,我们学习如果在MVC页面中使用PagedList.Mvc包来实现分页功能. 1) 安装PagedList.Mvc 首先,我们需要安装分页组件包,在Visual Studio 2010中点击[项目]-[管理NuGet程序包],打开NuGet包管理器窗体,在该窗体中,选择"联机"标签,然后搜索pagedlist,如下图所示.点击"安

扩展jquery实现客户端表格的分页、排序功能代码

下载代码和示例:jqueryPaging.rar 使用方法如下: 复制代码 代码如下: <script language="javascript" type="text/javascript"> $("#myTable").tablePaging({ pageSize: 5, sorting: true, sortSelector: ".js-Order", sortType: "number"

ASP.NET MVC分页控件

1.下载MvcPager.dll文件并引用到MVC项目中 2.在控制器中引用命名空间using Webdiyer.WebControls.Mvc; 3.获取数据集合,数据的总记录数(数据集合有多少条数据),设置每页记录数多少(每页显示多少条数据),获取当前页码(当前第几页) 例如: 4.创建视图,将换成 5.在web.config中的 6.在显示的数据下面 @Html.Pager(Model, new PagerOptions() { AlwaysShowFirstLastPageNumber

ASP.NET MVC分页问题解决

在使用Ajax.Pager进行分页的时候需要注意一下几个方面: 1.一定要引入jquery.unobtrusive-ajax.min.js这个js: 2.一定要在页面中使用注册分页器,注册方法:@{Html.RegisterMvcPagerScriptResource();}: 具体的使用方法示例: <div class="row" style="position: relative; left: 30%"> <div class="co

在ASP.NET 2.0中操作数据之二十四:分页和排序报表数据

导言 分页和排序是在WEB应用程序中展现数据常见的功能.比如,当我们在一个网上书店搜索ASP.NET书籍的时候,可能有几百本相关书籍,但是我们只希望每页显示10条有效记录.而且,我们还希望结果能根据标题.价格.页数和作者等等来进行排序.过去的23个教程中我们研究了如何建立各种报表,包括在界面上添加编辑和删除数据.但是我们没有研究如何对数据进行排序,对于分页我们也仅在研究DetailsView和FormView控件的时候看到. Step 1:添加分页和排序页面 在我们开始以前,首先让我们花些时间来

ASP.Net MVC+Data Table实现分页+排序功能的方法

本文实例讲述了ASP.Net MVC+Data Table实现分页+排序功能的方法.分享给大家供大家参考,具体如下: 实现思路: 使用datatable内置的分页,排序 使用attribute+反射来控制需要排序和显示的字段以及顺序 分离排序和显示逻辑 若要添加搜索逻辑只需要传递搜索的字段到后端即可(js初始化时把"searching": false拿掉). View : @using BCMS.BusinessLogic @using BCMS.BusinessLogic.Model