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 相关文章推荐
js 学习笔记(三)
Dec 29 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
用JS创建一个录屏功能
Nov 11 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
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
用PHP制作静态网站的模板框架(四)
2006/10/09 PHP
php 分页原理详解
2009/08/21 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
php设计模式之委托模式
2016/02/13 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
详解node.js的http模块实例演示
2018/07/12 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
python连接池实现示例程序
2013/11/26 Python
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
django2.0扩展用户字段示例
2019/02/13 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
python环境下安装opencv库的方法
2020/03/05 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
机电专业个人求职信范文
2013/12/30 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
预备党员表决心的话
2015/09/22 职场文书
高中生社会实践心得体会
2016/01/14 职场文书