基于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 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
Vuex的各个模块封装的实现
Jun 05 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php 获取全局变量的代码
2011/04/21 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
Python中运行并行任务技巧
2015/02/26 Python
python获取外网ip地址的方法总结
2015/07/02 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
python中的错误如何查看
2020/07/08 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
英语生日邀请函
2014/01/23 职场文书
暑假家长评语大全
2014/04/17 职场文书
大专生找工作自荐书
2014/06/10 职场文书
毕业生工作求职信
2014/06/30 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书