基于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 相关文章推荐
基于mootools插件实现遮罩层新手引导
May 24 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
axios如何取消重复无用的请求详解
Dec 15 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投票程序源码
2007/03/11 PHP
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
laravel学习教程之关联模型
2016/07/30 PHP
php无限级分类实现方法分析
2016/10/19 PHP
javascript 闭包疑问
2010/12/30 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
JavaScript手机振动API
2016/06/11 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
python冒泡排序算法的实现代码
2013/11/21 Python
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
创业大赛策划书
2014/03/01 职场文书
会议主持词
2014/03/17 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
教师节主题班会方案
2015/08/17 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript