基于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 相关文章推荐
javascript 鼠标滚轮事件
Apr 09 Javascript
js null undefined 空区别说明
Jun 13 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
canvas实现图像放大镜
Feb 06 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 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
Protoss热键控制
2020/03/14 星际争霸
PHP判断图片格式的七种方法小结
2013/06/03 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
jQuery 表格插件整理
2010/04/27 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Python 多进程和数据传递的理解
2017/10/09 Python
python中reader的next用法
2018/07/24 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
浅谈django 重载str 方法
2020/05/19 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
年终晚会主持词
2014/03/25 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
连锁超市项目计划书
2014/09/15 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
Python实现打乒乓小游戏
2021/09/25 Python
Python如何将list中的string转换为int
2022/07/15 Ruby