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中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 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
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
php实现websocket实时消息推送
2018/03/30 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
puppeteer库入门初探
2019/01/09 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
easy_install python包安装管理工具介绍
2013/02/10 Python
python算法学习之基数排序实例
2013/12/18 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
用Python实现随机森林算法的示例
2017/08/24 Python
Python连接phoenix的方法示例
2017/09/29 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL