MVC分页，从无到有

题外话：前段时间逛博客园，偶然看到一个大神写的帖子：上层人员决定底层人员所用的技术，来论述了一下为什么java工资会大致比.net高，没办法因为这两个技术就像两个帝国一样，以至于平常的互撕完全是站在利益的角度上，没办法！他说如果.net的管理人员多了，那么.net所用的人也就多了，为此，又让我想到了开源的分享的真正意义：为了自己的技术，为了阐述自己写完这个项目的兴奋，同时每一个开源，也会让属于这个技术的人多一点提升。这就不是1+1=2那么简单了：理想的状态就是，高层管理人员越多，开源分享的越多，咱们的日子也就越好过，从而形成一个良性循环。

这个mvc分页自己愣是拖了从刚开始工作，几个月了，技术功底稍微有了，懒了好久才愿意动手写，而之所以写呢，则是因为前几天看到一个挺好玩的分页插件。

http://tympanus.net/jPaginate/ （官方演示文档）

一下完全就是自己当初从新手角度希望有一个完整分页的小项目来写的，

实现思路：添加分页插件，写好分页sql语句，页面js，后台与页面的传值，实现

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using YL.MySQL;
namespace DAL
{
    public class InfoDAL
    {

        /// <summary>
        /// 分页方法
        /// </summary>
        /// <param name="pageSize">页大小</param>
        /// <param name="pageIndex">页索引</param>
        /// <param name="keyword">关键字</param>
        /// <param name="TotalNumber">总数</param>
        /// <returns></returns>
        public List<Model.Info> GetListPageDataView(int pageSize, int pageIndex)
        {
            StringBuilder strSql = new StringBuilder();
            strSql.Append(@"select * from(SELECT (SELECT ColumnsName FROM ColumnsInfo where Id=Info.ColumnsInfoId)ColumnsName,*,ROW_NUMBER() OVER (ORDER BY property desc,OrderBy desc,CreateTime desc) AS RowNumber
                            FROM Info WHERE IsDel=0 and Isdisplay=1 ");

            strSql.Append(" )t");
            strSql.Append(" where t.RowNumber BETWEEN " + ((pageSize * (pageIndex - 1)) + 1) + " AND " + (pageSize * pageIndex) + "");

            var result = new MySqlAdoProvide().ExecuteReader(dr => dr.GetEntity<Model.Info>(), MySqlHelper.ConnectionStringManager, strSql.ToString()).ToList();

            return result;
        }

    }
}

三层就差不多了，数据库自己需要什么就添加个什么字段吧

sql帮助类，网上有下载直接引用就好

MVC引用-modeo,DAL,BLL

DAL引用，mysql,model

bll引用，model,DAL

然后下载分页插件

并添加到页面中来

@model MvcApplication2.Controllers.Class1
<html>
<head>
    <title>jQuery Pagination - jPaginate</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="jPaginate - jQuery Pagination Plugin" />
    <meta name="keywords" content="jquery, plugin, pagination, fancy" />
    <link rel="stylesheet" type="text/css" href="/css/style.css" media="screen" />
    <style>
        body {
            /*background: #a7c7dc url(/images/bg.png) repeat-x top left;*/
            font-family: verdana;
            padding: 0px;
            margin: 0px;
            letter-spacing: 2px;
        }

        .header {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 80px;
        }

            .header h1 {
                color: #fff;
                font-size: 38px;
                margin: 0px 0px 0px 30px;
                font-weight: 100;
                line-height: 80px;
                padding: 0px;
            }

        .footer {
            width: 100%;
            margin: 10px 0px 5px 0px;
        }

        a img {
            border: none;
            outline: none;
        }

        .content {
            margin-top: 100px;
            padding: 0px;
            bottom: 0px;
        }

        .about {
            width: 100%;
            height: 400px;
            background: transparent url(about.png) repeat-x top left;
            border-top: 2px solid #ccc;
            border-bottom: 2px solid #000;
        }

            .about .text {
                width: 16%;
                margin: 5px 2% 10px 2%;
                height: 380px;
                float: left;
                color: #FCFEF3;
                font-size: 16px;
                text-align: justify;
                letter-spacing: 0px;
            }

                .about .text h1 {
                    border-bottom: 1px dashed #ccc;
                    color: #fff;
                }

        .demo {
            width: 580px;
            padding: 10px;
            margin: 10px auto;
            border: 1px solid #fff;
            background-color: #f7f7f7;
        }

        h1 {
            color: #404347;
            margin: 5px 30px 20px 0px;
            font-weight: 100;
        }

        .pagedemo {
            border: 1px solid #CCC;
            width: 310px;
            margin: 2px;
            padding: 50px 10px;
            text-align: center;
            background-color: white;
        }
    </style>
</head>
<body>
    <table id="testtable">
        <thead style="text-align:left">
            <tr style="text-align:left">

                <th>归属栏目</th>
                <th>标题</th>
                <th id="time">日期</th>
                <th>置顶</th>
                <th>排序</th>
                <th>最新</th>
                <th class="project-status">状态</th>
                <th class="project-actions">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr style="display:block">

                <td></td>

            </tr>
        </tbody>

    </table>

    <div class="content">
        <div class="demo">
            <h1>Demo 1</h1>
            <div id="demo1">
            </div>
        </div>

        <!--<div id="paginationdemo" class="demo">
            <h1>Demo 5</h1>
            <div id="p1" class="pagedemo _current" style="">Page 1</div>
            <div id="p2" class="pagedemo" style="display:none;">Page 2</div>
            <div id="p3" class="pagedemo" style="display:none;">Page 3</div>
            <div id="p4" class="pagedemo" style="display:none;">Page 4</div>
            <div id="p5" class="pagedemo" style="display:none;">Page 5</div>
            <div id="p6" class="pagedemo" style="display:none;">Page 6</div>
            <div id="p7" class="pagedemo" style="display:none;">Page 7</div>
            <div id="p8" class="pagedemo" style="display:none;">Page 8</div>
            <div id="p9" class="pagedemo" style="display:none;">Page 9</div>
            <div id="p10" class="pagedemo" style="display:none;">Page 10</div>
            <div id="demo5">
            </div>
        </div>-->
    </div>

    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script src="~/Scripts/jquery.paginate.js"></script>

    <script type="text/javascript">

            $("#demo1").paginate({
                count: 100,//总页数
                start: 1,//开始页码
                display: 8,//显示条目
                border: true,//是否显示外边框
                border_color: ‘#fff‘,
                text_color: ‘#fff‘,
                background_color: ‘black‘,
                border_hover_color: ‘#ccc‘,
                text_hover_color: ‘#000‘,
                background_hover_color: ‘#fff‘,
                images: true,//“上一页”或“下一页”是否显示为图片，可选值： (true/false)
                mouse: ‘press‘,//如果为 “press” 那么当鼠标在上一页或下一页上按下的时候，页码将会一直滚动，如果为 “slide” 那么鼠标点击一次页码就会滚动一次
                //onchange,当鼠标点击页码回调的函数，参数为点击的页码

                onChange: function (page)
                {
                        $.ajax({
                            type: "GET",
                            url: "/Home/listview",
                            dataType: "json",
                            data: {
                                PageIndex: page,
                                PageSize: 10,

                            },
                            success: function (data) {

                                if (data.List.length > 0) {
                                    $("tbody tr td").empty();
                                    $.each(data.List, function (i, item) {
                                        $("tbody tr td ").append(item.TitleName,"</br>");//得到了内容
                                    });
                                }
                                else {
                                    $("tbody tr").empty();
                                    $("table tbody").append("<tr><td colspan=\"9\" align=\"center\">暂无记录</td></tr>");
                                }
                            }

                        });

                }
            });

            //$("#demo5").paginate({
            //    count         : 10,
            //    start         : 1,
            //    display     : 7,
            //    border                    : true,
            //    border_color            : ‘#fff‘,
            //    text_color              : ‘#fff‘,
            //    background_color        : ‘black‘,
            //    border_hover_color        : ‘#ccc‘,
            //    text_hover_color          : ‘#000‘,
            //    background_hover_color    : ‘#fff‘,
            //    images                    : false,
            //    mouse                    : ‘press‘,
            //    onChange                 : function(page){
            //                                $(‘._current‘,‘#paginationdemo‘).removeClass(‘_current‘).hide();
            //                                $(‘#p‘+page).addClass(‘_current‘).show();
            //                              }
            //});

            function ChangeDateFormat(val) {
                if (val != null) {
                    var date = new Date(parseInt(val.replace("/Date(", "").replace(")/", ""), 10));
                    //月份为0-11，所以+1，月份小于10时补个0
                    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                    var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                    return date.getFullYear() + "-" + month + "-" + currentDate;
                }
                return "";
            }

    </script>
</body>
</html>

页面添加了分页插件会有一个提示找不到分页插件的方法：原因是，必须保证红框里的为顶级父元素

控制器代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication2.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index(Model.Info model)

        {
            model.pageIndex = 1;
            model.pageSize = 10;
            var list = new BLL.InfoBLL().GetListPageDataView(model.pageSize, model.pageIndex);
            ViewBag.model = list;

            return View();
        }
        [HttpGet]
        public JsonResult listview(Model.Info model)
        {

            var list = new BLL.InfoBLL().GetListPageDataView(model.pageSize, model.pageIndex);
        return Json(new{List=list},JsonRequestBehavior.AllowGet);

        }

    }
}

不知道是不是说的太简单，但是也就是这样

时间： 2024-10-01 03:01:15

MVC分页，从无到有的相关文章

C# MVC分页,razor

IMVCPages interface IMVCPages { int GetItemsCount(); int GetPageSize(); int GetPagesCount(); /// <summary> /// 当前页面索引,用于分页 /// </summary> int CurrentPageIndex { get; set; } } View <div> 查询到 @Model.GetItemsCount() 条记录,共 @Model.GetPagesCou

MVC 分页获取数据 及点选按钮

@model PagedList<Lyxm.Entity.Suggestion>@using Webdiyer.WebControls.Mvc <div>    <ul class="breadcrumb">        <li>            @Html.ActionLink("基础维护", "", "")            <span class=&quo

PagedList.MVC分页

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

转：MVC分页

原文地址:http://www.cnblogs.com/iamlilinfeng/p/4075292.html 分页总是搞得我很烦,也是因为刚接触,貌似有好多插件,之前在用一个,可是后来发现一翻页原来的筛选项就提交不上了,然后就换了这个,其实这篇文章对我而言最起作用的还是View文件中BeginForm中的参数 new RouteValueDictionary { { "id", "" } },也许原来的分页方式加上这个参数也是可以的,还没尝试. 前言 前几天在博客

Mvc分页组件MvcSimplePager代码重构

1 Mvc分页组件MvcSimplePager代码重构 1.1 Intro 1.2 MvcSimplePager 代码优化 1.3 MvcSimplePager 使用 1.4 End Mvc分页组件MvcSimplePager代码重构 Intro MvcSimplePager 是为解决分页的而做的一个通用.扩展性良好的轻量级分页扩展,可以自定义分页时调用的方法,自定义分页所用的样式,样式与代码分离,维护方便. 网上有许多分页都是查询所有数据再从中查询某一页的数据,但是个人感觉数据很少时还可以,如

Mvc 分页栏扩展方法

using System; using System.Collections.Generic; using System.Reflection; using System.Text; using System.Web.Mvc; namespace System.Web.Mvc {     #region Mvc 分页栏扩展方法 HtmlPaginationBar /// <summary>     ///  Mvc 分页栏扩展方法     /// </summary>     pu

ASP.NET MVC 分页MvcPager

ASP.NET MVC 分页MvcPager 开源框架  admin  8个月前 (08-20)  1484浏览 他连续12年获得微软MPV称号,几年前,他写的ASP.NET分页控件,被很多.NET开发人员使用,现在他又写了名为MvcPager的分页扩展,并免费开源,支持MVC通用分页,与EF完美结合,支持AJAX分页,简单灵活,提供多个演示案例,是迄今为止最好的MVC分页方式,推荐各位ASP.NET MVC开发者使用. 分页是每个项目必须面对的技术点,不好的分页不但体验不好,而且会影响系统的整

Asp.NET MVC X.PageList.MVC 分页详解以及自定义样式

最近在研究MVC,自己做了个小项目:其中用到了分页功能,在网上找了很多相关的第三方插件,最后选择了X.PageList.MVC,插件是开源的,有利于学习所以选择了它,这并不是说其它的分页插件不好,只是个人爱好,当然,用于以后还是会说好的.^^ 首先可以看下源,在GitHub上,地址如下: X.PageList.MVC GitHub 源代码地址 初步看了一个项目比较精简,核心部分为X.PagedList.Mvc中的内容,配置文件为:PagedListRenderOptions.cs 这个插件可以完

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

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