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

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

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

先来一张效果图；

下面来看具体实现；

Controller：

public ActionResult Index()

{

return View();

}

///

/// 分布视图

///

///

///

public ActionResult List(UserQuery query)

{

var list = UserRepository.GetList(query);

return View(list);

}

QGnhyb

Repository

public Page GetList(UserQuery query)

{

var sql = Sql.Builder.Append("select Id,UserName,Password,Age,Gender,CreateTime from Users where 1=1 ");

if (!string.IsNullOhttp://rWhiteSpace(query.UserName))

{

sql.Append("and username like @0", "%" + query.UserName + "%");

}

return Page(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'http://)) {

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{

}

搜索

分布视图:

@{

Layout = null;

}

@model PetaPoco.Page

@if (Model.TotalItems == 0)

{

}

@foreach (var d in Model.Items)

{

}

以上所述是给大家介绍的mvc 、bootstrap 结合分布式图简单实现分页，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。