基于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实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
js精确的加减乘除实例
Nov 14 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
详解Vite的新体验
Feb 22 Javascript
javascript实现计算器功能详解流程
Nov 01 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使用多个进程同时控制文件读写示例
2014/02/28 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
JS实现li标签的删除
2019/04/12 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
python使用epoll实现服务端的方法
2018/10/16 Python
Django 开发环境配置过程详解
2019/07/18 Python
python3实现高效的端口扫描
2019/08/31 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
介绍下Java的输入输出流
2014/01/22 面试题
老人祝寿主持词
2014/03/28 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
就业意向书范本
2015/05/11 职场文书
员工升职自我评价
2019/03/26 职场文书