基于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动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
javascript的this关键字详解
May 20 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
php轻松实现文件上传功能
2016/03/03 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
python回调函数的使用方法
2014/01/23 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
python高阶爬虫实战分析
2018/07/29 Python
浅谈django的render函数的参数问题
2018/10/16 Python
Python检查ping终端的方法
2019/01/26 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
Series和DataFrame使用简单入门
2019/11/13 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
Python类的动态绑定实现原理
2020/03/21 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
英国航空官网:British Airways
2016/09/11 全球购物
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
新郎新娘致辞
2015/07/31 职场文书
新学期开学寄语2016
2015/12/04 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
聊一聊python常用的编程模块
2021/05/14 Python