mvc 、bootstrap 、结合分布式图分页的简单实现。

记得是从刚毕业不久就注册了博客园，那个时候只是在园子里看别人写的文章，一直到现在自己没发过一篇文章，实在说不过去，今天先写第一篇。

分页采用laypage使用起来比较简单但是功能很齐全，数据库访问使用petapoco，bootstrap用的是flatlab模版，采用mvc的repository模式。

先来一张效果图；

下面来看具体实现；

Controller：

public ActionResult Index()
        {
            return View();
        }
        /// <summary>
        /// 分布视图
        /// </summary>
        /// <param name="query"></param>
        /// <returns></returns>
        public ActionResult List(UserQuery query)
        {
            var list = UserRepository.GetList(query);
            return View(list);
        }

Repository

public Page<User> GetList(UserQuery query)
        {
            var sql = Sql.Builder.Append("select Id,UserName,Password,Age,Gender,CreateTime from Users where 1=1 ");
            if (!string.IsNullOrWhiteSpace(query.UserName))
            {
                sql.Append("and username like @0", "%" + query.UserName + "%");
            }
            return Page<User>(query.PageIndex, query.PageSize, sql);
        }

js:

var users = {
    lpage: function (query) {
        var self = this;
        var url = '/test/list?r=' + Math.random();
        $.get(url,
            query,
            function (h) {
　　　　　　　　　//get 请求分布视图，返回html，把html添加到对应的div里
                $('#datadiv').html(h);
                laypage({
                    cont: 'pager',
                    pages: $('#pagecount').val(),
                    skin: 'molv',
                    skip: true,
                    curr: query.pageindex,
                    jump: function (obj, first) {
                        if (!first) {
                            var nquery = $.extend({}, query, { pageindex: obj.curr });
                            self.lpage(nquery);
                        }
                    }
                });
            },
            'html');
    },
    load: function () {
　　　　//搜索条件，序列化成对象
        var query = users.serializeElements($(':input', '#searchdiv'));
        query.pageindex = 1;
        query.pagesize = 10;
        users.lpage(query);
    },
    init: function () {
        users.load();
        $('#searchbtn').click(function () {
            users.load();
        });
    },
    serializeElements: function (array) {
        var items = {};
        array.each(function () {
            var fieldname = this.name;
            if (fieldname) {
                var self = $(this);
                if (self.is(':checkbox') || self.is(':radio')) {
                    if (self.attr('checked'))
                        items[fieldname] = $(this).val();
                } else {
                    var val = self.val();
                    if (!self.is(':input')) {
                        val = val || $.trim(self.text());
                    }
                    if (val && val.length === 0) return;
                    items[fieldname] = val;
                }
            }
        });
        return items;
    }
}

html:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section js{
    <script src="~/assets/laypage/laypage.js"></script>
    <script src="~/Scripts/ixxiyy-js/users.js"></script>
    <script type="text/javascript">
        users.init();
    </script>
}
<!--main content start-->
<section id="main-content">
    <section class="wrapper">
        <!-- page start-->
        <div class="row">
            <div class="col-lg-12">
                <section class="panel">
                    <header class="panel-heading">
                        <div class="form-inline" id="searchdiv">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="登录名" name="UserName" />
                            </div>
                            <div class="form-group">
                                <button type="button" class="btn btn-primary" id="searchbtn"><i class="fa fa-search"></i>搜索</button>
                            </div>
                        </div>
                    </header>
                </section>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <section class="panel" id="datadiv"></section>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="pagination" id="pager"></div>
            </div>
        </div>
        <!-- page end-->
    </section>
</section>
<!--main content end-->

 分布视图:

@{
    Layout = null;
}
@model PetaPoco.Page<IxxIyy.Core.IxxIyyDB.User>
<input type="hidden" value="@Model.TotalPages" id="pagecount" />
<table class="table table-striped table-advance table-hover">
    <thead>
        <tr>
            <th><i class="fa fa-bullhorn"></i>UserName</th>
            <th class="hidden-phone"><i class="fa fa-question-circle"></i>Age</th>
            <th><i class="fa fa-bookmark"></i>Gender</th>
            <th><i class="fa fa-edit"></i>CreateTime</th>
        </tr>
    </thead>
    <tbody>
        @if (Model.TotalItems == 0)
        {
            <tr>
                <td colspan="4">暂无数据</td>
            </tr>
        }
        @foreach (var d in Model.Items)
        {
            <tr>
                <td><a href="#">@d.UserName</a></td>
                <td class="hidden-phone">@d.Age</td>
                <td>@d.Gender</td>
                <td>@d.CreateTime.Value.ToString("yyyy-MM-dd HH:mm")</td>
            </tr>
        }
    </tbody>
</table>

 

转载于:https://www.cnblogs.com/ixxiyy/p/5923618.html