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

随机推荐

linux网络管理基本命令
1.last 显示所有用户的登录情况 2.lastlog 显示那些用户有登录过,那些用户从来没登录过 3.traceroute 探测我指定网站的路径,来跟踪路由 .如:traceroute www ...
jmeter内存溢出处理方式记录
方法一: 使用jmeter进行压力测试时遇到一段时间后报内存溢出outfmenmory错误,导致jmeter卡死了,先尝试在jmeter.bat中增加了JVM_ARGS="- Xmx204 ...
java中static,final,private方法的继承多态问题
父类中的final private方法不能被继承,父类中的static方法可以被继承,但是不能重写,这三者都属于前期绑定,java中除了这三种以及构造方法之外剩下的都是后期绑定(运行是绑定). 当父 ...
springmvc+swagger2
一.swagger2依赖  <dependency> <groupId>io.springfox</groupId> < ...
【Ray Tracing in One Weekend 超详解】光线追踪1-1
Preface 从这一篇起,我们开始学光线追踪这门牛逼的技术.读了几天,一个字:强! 这一篇我们主要讲述技术入门和一些简单的案例. 我们先学这本: Ready 这本书需要ppmview这个软件帮忙看效 ...
捕获程序异常之tryCatch
一.try catch语法try…catch…finally…语法中除了try以外,catch和finally都是可选的(两者必须要有一个),也就是说try…catch…finally…语法有以下三种 ...
关于js操作符需要注意的地方
本文仅仅介绍部分js操作符在实际应用中需要注意的地方. 布尔操作符: //1.逻辑与操作属于短路操作,即如果第一个操作数能够决定结果那么就不会再对第二个操作数求值 var found=true; va ...
清北学堂省选刷题冲刺班 Test Day3
目录 2018.3.27 Test T1 T2 T3 考试代码 T2 T3 2018.3.27 Test 时间:8:00~11:30 期望得分:100+60+25=185 实际得分:100+40+25 ...
bzoj1151 动物园
Description 新建的圆形动物园是亚太地区的骄傲.圆形动物园坐落于太平洋的一个小岛上,包含一大圈围栏,每个围栏里有一种动物.如下图所示: 你是动物园的公共主管.你要做的是,让每个来动物园的人 ...
【转载】vc编译exe的体积最小优化
原文地址:http://www.2cto.com/kf/200908/40970.html vc通过设置参数来自定义编译方式.主要用到的技巧有: 一,使用release版而不用debug版编译使用d ...

MVC异步分页

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

随机推荐

热门专题