基于KO+BootStrap+MVC实现的分页控件代码分享


Posted in Javascript onNovember 07, 2016

JS:

/// <reference path="../knockout-3.2.0.js" />
var ViewModel = function (data) {
var self = this;
self.ObjectList = ko.observableArray(data.ObjectList)
self.TotalCount = ko.observable(data.TotalCount);
self.PerCount = ko.observable(data.PerCount);
self.pageIndex = ko.observable(data.Index);
self.btns = ko.observableArray();
var getData = function (wantIndex) {
$.getJSON("/BaseInfor/GetList",
{
pageIndex: wantIndex, pageSize: self.PerCount()
},
function (data) {
self.ObjectList(data.ObjectList);
self.TotalCount(data.TotalCount);
self.PerCount(data.PerCount);
self.pageIndex(data.Index);
});
}
self.btnClick = function (item) {
getData(item);
}
self.perPageClick = function () {
var wantIndex = self.pageIndex() - 1;
if (wantIndex <= 0) return;
getData(wantIndex);
}
self.nextPageClick = function () {
var wantIndex = self.pageIndex() + 1;
if (wantIndex - 1 > (self.TotalCount() / self.PerCount())) return;
getData(wantIndex);
}
self.firstPageClick = function () {
getData(1);
}
self.lastPageClick = function () {
getData(self.pageTotal());
}
ko.computed(function () {
self.pageTotal = ko.observable(Math.ceil((self.TotalCount() / self.PerCount())))
var pageCount = self.pageTotal();
var start = (self.pageIndex() - 5) > 0 ? self.pageIndex() - 5 : 0;
var end = (start + 9) < pageCount ? start + 9 : pageCount;
if (end == pageCount)
{ var start = (pageCount - 9) > 0 ? pageCount - 9 : 0;; }
self.btns.removeAll();
for (var i = start; i < end; i++) {
self.btns.push(ko.mapping.fromJS(i + 1));
}
});
}
$(document).ready(function () {
$.getJSON("/BaseInfor/GetList",
{
pageIndex: 1, pageSize: 5
},
function (data) {
ko.applyBindings(new ViewModel(data));
});
});

HTML:

<table class="table table - striped">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>出生年月</th>
<th>年龄</th>
<th>民族</th>
<th>身份证号</th>
<th>入党时间</th>
<th>工作时间</th>
<th>籍贯</th>
<th>出生地</th>
<th>证件照</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: ObjectList -->
<tr>
<td data-bind="text:Name"></td>
<td data-bind="text:Gender"></td>
<td data-bind="text:BirthDate"></td>
<td data-bind="text:Age"></td>
<td data-bind="text:Nation"></td>
<td data-bind="text:IDNumber"></td>
<td data-bind="text:PartyTime"></td>
<td data-bind="text:WorkTime"></td>
<td data-bind="text:hail"></td>
<td data-bind="text:BirthAddress"></td>
<td data-bind="text:Photo"></td>
</tr>
<!-- /ko -->
</tbody>
</table>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<input class="btn btn-success" type="button" value="<" data-bind="click:perPageClick" />
</div>
<div class="btn-group">
<input class="btn btn-success" type="button" data-bind="value:'1',click:firstPageClick" />
</div>
<div class="btn-group">
<!-- ko foreach: btns -->
<!-- ko if: $data==$parent.pageIndex() -->
<button class="btn btn-success" type="button" data-bind="text:$data,click:$parent.btnClick"></button>
<!-- /ko -->
<!-- ko ifnot: $data==$parent.pageIndex() -->
<button class="btn btn-default" type="button" data-bind="text:$data,click:$parent.btnClick"></button>
<!-- /ko -->
<!-- /ko -->
</div>
<div class="btn-group">
<input class="btn btn-success" type="button" data-bind="value:pageTotal,click:lastPageClick" />
</div>
<div class="btn-group">
<input class="btn btn-success" type="button" value=">" data-bind="click:nextPageClick" />
</div>
<div class="btn-group">
<span data-bind="text:TotalCount()+'条数据'" />
</div>
</div>
<script src="/Scripts/jquery-2.1.1.min.js"></script>
<script src="/Scripts/knockout-3.2.0.js"></script>
<script src="/Scripts/knockout.mapping.js"></script>
<script src="/Content/Plus/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<link href="/Content/Plus/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="/Scripts/BaseInfor/List.js"></script>

以上所述是小编给大家介绍的基于KO+BootStrap+MVC实现的分页控件代码分享,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 3D球状导航的文章分类
Jul 06 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
记录一次完整的react hooks实践
Mar 11 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
react 路由Link配置详解
Nov 11 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 #Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 #Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 #Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 #Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 #Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 #Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 #Javascript
You might like
sql注入与转义的php函数代码
2013/06/17 PHP
php魔术变量用法实例详解
2014/11/13 PHP
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
Angular排序实例详解
2017/06/28 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
Python切片知识解析
2016/03/06 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
建龙钢铁面试总结
2014/04/15 面试题
预备党员转正思想汇报
2014/01/12 职场文书
认识深刻的检讨书
2014/02/16 职场文书
财务主管岗位职责
2014/02/28 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
远程教育学习心得体会
2016/01/23 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android
MySQL数据管理操作示例讲解
2022/12/24 MySQL