基于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使用activex控件的代码
Jan 27 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
微信小程序实现签字功能
Dec 23 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 微信扫码支付源代码(推荐)
2016/11/03 PHP
php实现URL加密解密的方法
2016/11/17 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
IE iframe的onload方法分析小结
2010/01/07 Javascript
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
python如何为创建大量实例节省内存
2018/03/20 Python
python模拟表单提交登录图书馆
2018/04/27 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
python实现滑雪游戏
2020/02/22 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
分布式数据库需要考虑哪些问题
2013/12/08 面试题
新闻专业应届生求职信
2013/10/31 职场文书
总经理检讨书范文
2015/02/16 职场文书
后勤个人工作总结
2015/02/28 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis