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;

    }

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

asp.net MVC 异步分页 PagedList
最近做一个项目要有的异步分页,先记录下来! 引用: PagedList.css MvcPager.js <link href="~/css/sweetalert2.min.css&qu ...
ASP.NET MVC中使用MvcPager异步分页+在分页中复选框下一页上一页也保持选中
ASP.NET MVC 分页使用的是作者杨涛的MvcPager分页控件地址:http://www.webdiyer.com/mvcpager/demos/ajaxpaging/ 这个分页控件在里面 ...
Asp.net MVC 使用PagedList（新的已更名为X.PagedList.Mvc）分页
在asp.net mvc 中,可以bootstrap来作为界面,自己来写分页程序.也可以使用PagedList(作者已更名为 X.PagedList.Mvc)来分页. 1.首先,在NuGet程序包管理 ...
基于存储过程的MVC开源分页控件--LYB.NET.SPPager
摘要现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...
基于layerpage 前后端异步分页
#下载jquery 和 layerpage1.核心分页方法 laypage({ cont: 'page1', //容器.值支持id名.原生dom对象,jquery对象. pages: json.tot ...
Spring+Mybatis+jQuery.Pagination.js异步分页及JsonConfig的使用
在开发工作中经常用到异步分页,这里简单整理一下资料. 一.Controller方法 package com.lwj.controller; import javax.servlet.http.Http ...
jQuery异步分页插件
学校软件工程让写课程设计(其实就是自选语言做个项目),感觉都是重复的东西就没有很认真的去写内容,更加注意写一些之前没有用过的东西. 因为一直都使用TP框架来写PHP,TP又自带分页类,想到这里就想试试 ...
mvc异步表单遇到的问题
1,mvc异步表单遇到的问题问题:使用jqury easy ui 时提交异步数据不能请求到服务器解决办法:经过细心调试和检测,发现jqury的加载顺序放在了easy ui之后,所以首先加 ...
Mvc自定义分页控件
MVC开发分页常常使用第三方控件,生成的分页HTML带有版权申明,虽然免费,但是总有的别扭.于是,某日,楼主闲来蛋疼,折腾了个自定义分页控件: 先来展示下效果图: 1>当分页不超过10页的时候, ...

随机推荐

prometheus的平台侧和应用侧结合，实现应用的metrics的抓取
这个细节,迷惑了我一段时间,前面也写过一篇blog,描述过这个问题. 今天看到一种更好的解决方法. 记录一下. prometheus在k8s集群里,抓取应用的metrics. 是需要平台侧和应用侧相互 ...
norbert-构建服务器集群感知的 Java 应用程序
http://www.ibm.com/developerworks/cn/java/j-zookeeper/index.html
hdu 5407(LCM好题+逆元)
CRB and Candies Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)T ...
mysql存储过程之游标
MySQL5 中添加了存储过程的支持. 大多数SQL语句都是针对一个或多个表的单条语句.并非所有的操作都怎么简单.经常会有一个完整的操作需要多条才能完成存储过程简单来说,就是为以后的 ...
关于set
set 这是一个十分神奇的东西他的基本原理是平衡树而且这个set的运用其实方便了一些在计算时间上的优化(STL大法好) 其实是因为我不会写平衡树这个set的基本用法如下: iterator 指针 ...
【Ray Tracing The Next Week 超详解】光线追踪2-4 Perlin noise
Preface 为了得到更好的纹理,很多人采用各种形式的柏林噪声(该命名来自于发明人 Ken Perlin) 柏林噪声是一种比较模糊的白噪声的东西:(引用书中一张图) 柏林噪声是用来生成一些看似杂乱 ...
[代码审计]phpshe开源商城后台两处任意文件删除至getshell
0x00 背景这套系统审了很久了,审计的版本是1.6,前台审不出个所以然来.前台的限制做的很死. 入库的数据都是经过mysql_real_escape_string,htmlspecialchars ...
Android Socket
Android Socket 参考资料菜鸟教程怎么理解TCP的面向连接和UDP的无连接 https://www.cnblogs.com/xiaomayizoe/p/5258754.html htt ...
【莫队算法】【权值分块】bzoj3920 Yuuna的礼物
[算法一] 暴力. 可以通过第0.1号测试点. 预计得分:20分. [算法二] 经典问题:区间众数,数据范围也不是很大,因此我们可以: ①分块,离散化,预处理出: <1>前i块中x出现的次 ...
hdu 1116 敌兵布阵（树状数组区间求和）
题意: 给出一行数字,然后可以修改其中第i个数字,并且可以询问第i至第j个数字的和(i <= j). 输入: 首行输入一个t,表示共有t组数据. 接下来每行首行输入一个整数n,表示共有n个数字. ...

MVC异步分页

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

随机推荐

热门专题