如图：

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;

    }

　　

MVC异步分页的更多相关文章

  1. asp.net MVC 异步分页 PagedList

    最近做一个项目要有的异步分页,先记录下来! 引用: PagedList.css MvcPager.js <link href="~/css/sweetalert2.min.css&qu ...

  2. ASP.NET MVC中使用MvcPager异步分页+在分页中复选框下一页上一页也保持选中

    ASP.NET MVC 分页使用的是作者杨涛的MvcPager分页控件  地址:http://www.webdiyer.com/mvcpager/demos/ajaxpaging/ 这个分页控件在里面 ...

  3. Asp.net MVC 使用PagedList（新的已更名 为X.PagedList.Mvc） 分页

    在asp.net mvc 中,可以bootstrap来作为界面,自己来写分页程序.也可以使用PagedList(作者已更名为 X.PagedList.Mvc)来分页. 1.首先,在NuGet程序包管理 ...

  4. 基于存储过程的MVC开源分页控件--LYB.NET.SPPager

    摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...

  5. 基于layerpage 前后端异步分页

    #下载jquery 和 layerpage1.核心分页方法 laypage({ cont: 'page1', //容器.值支持id名.原生dom对象,jquery对象. pages: json.tot ...

  6. Spring+Mybatis+jQuery.Pagination.js异步分页及JsonConfig的使用

    在开发工作中经常用到异步分页,这里简单整理一下资料. 一.Controller方法 package com.lwj.controller; import javax.servlet.http.Http ...

  7. jQuery异步分页插件

    学校软件工程让写课程设计(其实就是自选语言做个项目),感觉都是重复的东西就没有很认真的去写内容,更加注意写一些之前没有用过的东西. 因为一直都使用TP框架来写PHP,TP又自带分页类,想到这里就想试试 ...

  8. mvc异步表单遇到的问题

    1,mvc异步表单遇到的问题    问题:使用jqury easy ui 时提交异步数据不能请求到服务器   解决办法:经过细心调试和检测,发现jqury的加载顺序放在了easy ui之后,所以首先加 ...

  9. Mvc自定义分页控件

    MVC开发分页常常使用第三方控件,生成的分页HTML带有版权申明,虽然免费,但是总有的别扭.于是,某日,楼主闲来蛋疼,折腾了个自定义分页控件: 先来展示下效果图: 1>当分页不超过10页的时候, ...

随机推荐

  1. Marriage is Stable HDU1522 稳定婚姻问题基础

    几对男女   给出每个人心中的优先级   进行最合理的匹配 要打印名字的话必须有一个名字数组 英文名用map 稳定婚姻问题: 每次循环遍历所有的男的 每个男的对目前未被拒绝的并且优先级最高的进行预匹配 ...

  2. RN组件可用属性整理

  3. sorted（）排序详解

    sorted()排序详解     http://wiki.python.org/moin/HowTo/Sorting?highlight=%28howto%29#The_Old_Way_Using_t ...

  4. P2429 制杖题

    P2429 制杖题这个题用线性筛会WA一个点,因为这个题是给定的质数集,最大的质数会比当前的倍数大,就会出现上面的情况.怎办?判重用set啊!set+线性筛就过掉了.16ms #include< ...

  5. 前端页面重构技巧总结TIP【持续更新...】

    本文均为项目实战经验,要求兼容至IE8,所以以下内容均为兼容代码,欢迎各位小伙伴批评指教.其实重构页面是一门学问,看似简单,却暗藏很多学问.实际项目中页面的重构有以下几点最基本需求: 1.需要使用合理 ...

  6. 初识MYSQL2

    mysql的配置 MySql默认的端口号是3306 默认字符集的设置 在mysql的安装目录,会看到my.ini文件! my.ini文件介绍 01.default-character-set=utf8 ...

  7. python面向对象魔术方法补充

    一.描述符 在 面向对象 编程中 定义一个(没有定义方法)类:class person , 在这个类里面,有name,age, heigth, weight,等等属性, 这个类就可以看作一个对 per ...

  8. Codeforces Round #371 (Div. 1) C. Sonya and Problem Wihtout a Legend 贪心

    C. Sonya and Problem Wihtout a Legend 题目连接: http://codeforces.com/contest/713/problem/C Description ...

  9. Intel Code Challenge Elimination Round (Div.1 + Div.2, combined) C. Destroying Array 带权并查集

    C. Destroying Array 题目连接: http://codeforces.com/contest/722/problem/C Description You are given an a ...

  10. DIV+javascript实现首尾相连循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...