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

 public ActionResult Index() { return View(); } /// 
 /// 分布视图 /// 
 ///  ///  public ActionResult List(UserQuery query) { var list = UserRepository.GetList(query); return View(list); }

 public Page 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(query.PageIndex, query.PageSize, sql); }

 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; } }

 @{ 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) {  } 
 
 
 
UserName
Age
Gender
CreateTime
 
暂无数据
 
@d.UserName
@d.Age
@d.Gender
@d.CreateTime.Value.ToString("yyyy-MM-dd HH:mm")