基于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的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
javascript屏蔽右键代码
May 15 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
js实现图片懒加载效果
Jul 17 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
很可爱的输入框
2008/08/03 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
python中defaultdict的用法详解
2017/06/07 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
2013年学期结束动员演讲稿
2014/01/07 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
实习介绍信模板
2015/01/30 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android