一个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>

源码下载地址:https://github.com/wangwei123/jBootstrapPage

jQuery分页插件jBootstrapPage,一个Bootstrap风格的分页插件的更多相关文章

  1. 一个Bootstrap风格的分页控件

      http://www.cnblogs.com/wangwei123/p/3682626.html 主题 jQueryBootstrap 一个Bootstrap风格的分页控件,对于喜欢Bootstr ...

  2. bootstrap风格的multiselect插件——类似邮箱收件人样式

    在开发颗粒云邮箱的过程中,遇到了一个前端的问题,就是邮箱收件人的那个multiselect的input输入框.不仅能够多选,还要能够支持ajax搜索,把联系人搜索出来.就是类似下面的这个东西: 网上找 ...

  3. [js插件]分享一个文章内容信息提示插件Colortip

    引用 项目中需要一个信息提示的功能,就上网找了一个插件,发现colortip实现比较简单,就定了这个插件. 实现过程 官网:http://tutorialzine.com/2010/07/colort ...

  4. chrome插件-YSlow 一个使用的web性能测试插件

    本文为转载是文章,如作者发现后不愿意,请联系我进行删除 原文链接:http://www.cnblogs.com/wajika/p/6278825.html YSlow的安装: 1.安装 firebug ...

  5. thinkphp结合bootstrap打造个性化分页

    分页功能是web开发中常见的一项功能,也存在很多形式,这里主要讲一下利用thinkPHP框架的page类来打造一款bootstrap风格的分页过程. 首先需要去thinkPHP官网现在其分页扩展类ht ...

  6. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  7. Bootstrap的js分页插件属性介绍

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定 制,提供了公共的方法可随时获得插件状 ...

  8. 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...

  9. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

随机推荐

  1. NSURLSessionDownloadTask 断点下载

    #import "ViewController.h" #import "ASIHTTPRequest.h" #import <AFNetworking/A ...

  2. labview中层叠式顺序结构与平铺式顺序结构有什么不同?

    也就看着不同,平铺式看着直观,但比较占地方,程序复杂了就显得过大.二者可互相转换,从这点也可以看出它们没有本质不同!

  3. The content of element type "beans" must match "(description?,(import|alias|bean)*)

    The content of element type "beans" must match "(description?,(import|alias|bean)*) - ...

  4. android智能天气闹钟应用开发经过

    开发这个应用的初衷是这样产生滴,和我一块租房的同学每天早上都是骑单车上班,所以手机闹钟就会定一个刚好适合骑车的起床时间点.但是呢,有一天早上起床以后发现外面下挺大雨,肯定是不能骑车去上班了,于是就只好 ...

  5. iOS中保证线程安全的几种方式与性能对比

    来源:景铭巴巴 链接:http://www.jianshu.com/p/938d68ed832c 一.前言 前段时间看了几个开源项目,发现他们保持线程同步的方式各不相同,有@synchronized. ...

  6. Android开发之使用意图调用内置应用程序

    意图可以调用活动,也常被用来调用内置应用程序,如加载web页面,拨号页面,内置地图应用等等.下面就用例子来说明该用法. 效果图如下: 实现代码如下: 上图中的启动MyBrowser是用意图来调用MyW ...

  7. vc++ 最小化到托盘的详细实现

    在VC++中,想实现将MFC最小化到系统托盘,需要调用NOTIFYICONDATA类,并注册相应的消息,以下详细讲解如何实现: 1.声明一个NOTIFYICONDATA类,也就是NOTIFYICOND ...

  8. 建立一个方法的attribute,可以放在任意方法上,可以自动记录方法出错时的信息,就不用写try 。。cacth. 【注意】 不是在asp.net MVC下,是在普通三层结构下写的的特性。

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...

  9. jQuery 如何设置input checkbox 更有效 prop()

    问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性 ...

  10. Win32中GDI+应用(二)--初始化与清理

    GDI+提供了GdiplusStartup和 GdiplusShutdown 函数来进行初始化和完成清理工作.你必须在调用其他的GDI+函数之前,调用GdiplusStartup函数,在完成GDI+工 ...