一个Bootstrap风格的分页控件
一个Bootstrap风格的分页控件，对于喜欢Bootstrap简洁美观和扁平化的同学可以关注jBootstrapPage， 目前jBootstrapPage最新版为V0.1，后续还有更多功能需要完善。
demo演示地址: http://www.it175.cn/demo/jBootstrapPage/
代码示例:
html代码
<html>
<head>
<link href="jBootsrapPage.css" rel="stylesheet" />
<script src="jquery-1.10.2.min.js"></script>
<script src="jBootstrapPage.js"></script>
</head>
<body>
<div>
<ul class="pagination"></ul>
</div>
<body>
</html>
javascript代码调用
每页显示多少条数据(pageSize),显示多少个分页按钮(buttons),传入数据总行数(total)即可， 如果需要在选中某一页，然后去请求服务器端，可以在onPageClicked回调函数中完成。
<script type="text/javascript">
$(function(){
createPage(10, 13, 150);
function createPage(pageSize, buttons, total) {
$(".pagination").jBootstrapPage({
pageSize : pageSize,
total : total,
maxPageButton:buttons,
onPageClicked: function(obj, pageIndex) {
alert((pageIndex+1)+'页');
}
});
}
});
</script>
一个Bootstrap风格的分页控件的更多相关文章
- jQuery分页插件jBootstrapPage，一个Bootstrap风格的分页插件
一个Bootstrap风格的分页控件,对于喜欢Bootstrap简洁美观和扁平化的同学可以关注jBootstrapPage, 目前jBootstrapPage最新版为V0.1,后续还有更多功能需要完善 ...
- 一不小心写了个bootstrap风格下拉控件 JqueryUI + bootstrap
受够了EasyUI的封闭,Bootstrap虽然华丽但是功能太渣,闲着无聊写个下拉控件玩玩吧,不喜勿喷哈... 第一步:先设计下我的下拉控件的样子 1.既然是bootstrap风格的,我想应该是这样的 ...
- 基于KO+bootstrap+MVC的分页控件
JS: /// <reference path="../knockout-3.2.0.js" /> var ViewModel = function (data) { ...
- 使用 Vue.js 结合bootstrap 实现的分页控件
原文链接:http://blog.csdn.net/qiuhaotc/article/details/53031884 源码下载: http://pan.baidu.com/s/1i4XgH6H 密码 ...
- uinty3d使用ugui封装一个分页控件
我们在显示数据时有的数据比较多,手机内存有限,我们不可能分配很多的控件来显示这些数据,分页是一个不错的选择.比如玩家交易行.我们现在封装一个自己简单的分页控件来显示玩家交易行. 分页控件的原理其实很简 ...
- 自定义angularjs分页控件
继昨天写了knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页 ,正好最近刚学习angularjs ,故琢磨着写一个angularjs版本的分页 ...
- WPF管理系统自定义分页控件 - WPF特工队内部资料
最近做一个演示的管理系统项目,需要用到分页控件,在网上找了很多,依然找到与UI模版匹配的,最后干脆自己写一个. 分页控件分析: 1.分页控件分简单显示和复杂显示两种: 2.包含上一页.下一页以及页码明 ...
- AspNetPager.dll 分页控件使用
今天在用.net 做网站的时候,用到了DATALIST,但是datalist 没有自带的分页控件,后来在网上找了好长时间,看了aspnetpager.dll这个控件,这个控件挺好用的.我把使用方法写出 ...
- 基于Bootstrap仿淘宝分页控件实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
随机推荐
- ant来历
看看<ant权威指南>或者ant的网站吧,里面介绍得非常详细ant的来历,目的.ant是tomcat的一个副产品,是在开发tomcat过程中,开发人员需要一个整合编译工具,因为在一个大项目 ...
- Iperf使用方法
Iperf使用方法 Iperf 是一个网络性能测试工具.Iperf可以测试TCP和UDP带宽质量.Iperf可以测量最大TCP带宽,具有多种参数和UDP特性.Iperf可以报告带宽,延迟抖动和数据包 ...
- iframe父子窗口取值
父窗口中操作iframe:window.frames["iframeChild"].document //假如iframe的id为iframeChild 在子窗口中操作父窗口:wi ...
- Apache Avro 与 Thrift 比较
http://www.tbdata.org/archives/1307 Avro和Thrift都是跨语言,基于二进制的高性能的通讯中间件. 它们都提供了数据序列化的功能和RPC服务. 总体功能上类似, ...
- html + ashx 实现Ajax省市联动
基本思路:1.了解数据库中省和市的表结构及关联主键 2.创建html页面及select标签 3.通过ajax向ashx(一般处理程序)发送后台请求完成联动效果 表结构: 这里,开始创建一个命为demo ...
- Mac 下显示隐藏文件
将下面的命令粘贴进终端,按提示操作即可(可能需要输入电脑密码) 显示:defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏:d ...
- ES6的编码风格
编程风格 [转自http://es6.ruanyifeng.com/#docs/style] 块级作用域 字符串 解构赋值 对象 数组 函数 Map结构 Class 模块 ESLint的使用 本章探讨 ...
- 手把手教你写电商爬虫-第四课 淘宝网商品爬虫自动JS渲染
版权声明:本文为博主原创文章,未经博主允许不得转载. 系列教程: 手把手教你写电商爬虫-第一课 找个软柿子捏捏 手把手教你写电商爬虫-第二课 实战尚妆网分页商品采集爬虫 手把手教你写电商爬虫-第三课 ...
- IF EXIST: The syntax of the command is incorrect.
Batch 脚本中使用 IF EXIST 语句时,总是提示 The syntax of the command is incorrect. 原始 bat 脚本如下: ECHO OFF SET proj ...
- 九度OJ 1124 Digital Roots -- 数位拆解
题目地址:http://ac.jobdu.com/problem.php?pid=1124 题目描述: The digital root of a positive integer is found ...