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页的时候, ...

随机推荐

MongoDB CPU使用较高，如何排查？
前言首先,我们简单梳理一下,CPU 在什么情况下才算负载较高?负载查看是通过"uptime"命令查看.大家都知道,命令显示的结果分别表示1分钟.5分钟.15分钟的负载情况,这点就 ...
pycharm 终端命令行中文乱码解决
ssh连接服务器,运行脚本发现终端显示的中文乱码.百度了很多方法,都没解决.后来换了个putty连接上去运行,输出屏幕的中文没乱码.可以确定是pycharm设置问题. 设置方法: File -- s ...
java学习之借书系统
实现的图书借阅系统要处理用户输入的非法参数,并引导用户正确使用测试结果: 主要目的就是练习异常处理中的Exception类的使用使用的相关语法 try{ //可能产生异常的代码块 }catch(E ...
R语言编程艺术（5）R语言编程进阶
本文对应<R语言编程艺术> 第14章:性能提升:速度和内存: 第15章:R与其他语言的接口: 第16章:R语言并行计算 ================================== ...
Python - 从列表中取随机数
题目是:从一个有序列表中任取几个值组成新的列表以下有2种思路去实现 1. 把那列表任意排列,截取尾巴上面的指定长度 import random total = 100 onetime = 7 x_l ...
Linux文件的所有权与权限
要了解Linux的权限,需要和Linux的用户与组的概念一并理解,不了解的同学请参考Linux的用户和组简介在Linux中,每个文件除了有用户和组的信息以外,还有其对应的权限.可使用来查看. [r ...
浅谈2-SAT（待续）
2-SAT问题,其实是一个逻辑互斥问题.做了两道裸题之后仔细想来,和小时候做过的“有两个女生,如果A是女生,那么B一定不是女生.A和C性别相同,求A.B.C三人的性别.”几乎是一样的. 对于这道题我们 ...
codevs 水过骑马修栅栏
[问题描述] 农民John每年有很多栅栏要修理.他总是骑着马穿过每一个栅栏并修复它破损的地方. John是一个与其他农民一样懒的人.他讨厌骑马,因此从来不两次经过一个一个栅栏.你必须编一个程序,读入栅 ...
[TC14088]LimitedMemorySeries1
[TC14088]LimitedMemorySeries1 题目大意: 给定长度为\(n(n\le5\times10^6)\)的数组\(X\),询问不超过\(q(q\le100)\)次,每次询问第\( ...
CF 222 (DIV 1)
A: 我是bfs出一颗树,然后删掉树后面的k个结点. 其实也可以直接bfs出一块连通的s - k个点,其余的.打X就可以了. 很水的题目. /* *************************** ...

MVC异步分页

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

随机推荐

热门专题