基于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 相关文章推荐
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
js实现轮播图特效
May 28 Javascript
React Fragment介绍与使用详解
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
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
PHP可变函数的使用详解
2013/06/14 PHP
discuz目录文件资料汇总
2014/12/30 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
python操作mysql代码总结
2018/06/01 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
实例讲解python中的序列化知识点
2018/10/08 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
婴儿地球:Baby Earth
2018/12/25 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
应届生护士求职信
2013/11/01 职场文书
狼和鹿教学反思
2014/02/05 职场文书
道德模范先进事迹
2014/02/14 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
2015年大学生工作总结
2015/04/21 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书