基于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回车完美实现tab切换功能
Mar 13 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
layui 弹出层值回传解决方式
Nov 14 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
星际RPG字典
2020/03/04 星际争霸
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
php汉字转拼音的示例
2014/02/27 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
vue+element实现表单校验功能
2019/05/20 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
python每隔N秒运行指定函数的方法
2015/03/16 Python
Python isinstance函数介绍
2015/04/14 Python
python中import学习备忘笔记
2017/01/24 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
英国行业制服供应商:Alexandra
2019/09/14 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
电子专业毕业生自荐信
2014/05/25 职场文书
党员作风建设整改方案
2014/10/27 职场文书
高中数学教学反思范文
2016/02/18 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
Python jiaba库的使用详解
2021/11/23 Python