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


Posted in Javascript onOctober 10, 2016

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

先来一张效果图;

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

下面来看具体实现;

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>

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

Javascript 相关文章推荐
第一个JavaScript入门基础 document.write输出
Feb 22 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
element tree树形组件回显数据问题解决
Aug 14 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 #Javascript
JS命令模式例子之菜单程序
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 #Javascript
You might like
JavaScript的目的分析
2007/01/05 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
Python聚类算法之基本K均值实例详解
2015/11/20 Python
Python自动生产表情包
2017/03/17 Python
Python数据操作方法封装类实例
2017/06/23 Python
python WindowsError的错误代码详解
2017/07/23 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
学生信息管理系统python版
2018/10/17 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
创立科技Java面试题
2015/11/29 面试题
西式婚礼主持词
2014/03/13 职场文书
励志演讲稿500字
2014/08/21 职场文书
敬老月活动总结
2014/08/28 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
教师年度考核个人总结
2015/02/12 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
初三语文教学反思
2016/03/03 职场文书