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

一个Bootstrap风格的分页控件的更多相关文章

  1. jQuery分页插件jBootstrapPage,一个Bootstrap风格的分页插件

    一个Bootstrap风格的分页控件,对于喜欢Bootstrap简洁美观和扁平化的同学可以关注jBootstrapPage, 目前jBootstrapPage最新版为V0.1,后续还有更多功能需要完善 ...

  2. 一不小心写了个bootstrap风格下拉控件 JqueryUI + bootstrap

    受够了EasyUI的封闭,Bootstrap虽然华丽但是功能太渣,闲着无聊写个下拉控件玩玩吧,不喜勿喷哈... 第一步:先设计下我的下拉控件的样子 1.既然是bootstrap风格的,我想应该是这样的 ...

  3. 基于KO+bootstrap+MVC的分页控件

    JS: /// <reference path="../knockout-3.2.0.js" /> var ViewModel = function (data) { ...

  4. 使用 Vue.js 结合bootstrap 实现的分页控件

    原文链接:http://blog.csdn.net/qiuhaotc/article/details/53031884 源码下载: http://pan.baidu.com/s/1i4XgH6H 密码 ...

  5. uinty3d使用ugui封装一个分页控件

    我们在显示数据时有的数据比较多,手机内存有限,我们不可能分配很多的控件来显示这些数据,分页是一个不错的选择.比如玩家交易行.我们现在封装一个自己简单的分页控件来显示玩家交易行. 分页控件的原理其实很简 ...

  6. 自定义angularjs分页控件

    继昨天写了knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页 ,正好最近刚学习angularjs ,故琢磨着写一个angularjs版本的分页 ...

  7. WPF管理系统自定义分页控件 - WPF特工队内部资料

    最近做一个演示的管理系统项目,需要用到分页控件,在网上找了很多,依然找到与UI模版匹配的,最后干脆自己写一个. 分页控件分析: 1.分页控件分简单显示和复杂显示两种: 2.包含上一页.下一页以及页码明 ...

  8. AspNetPager.dll 分页控件使用

    今天在用.net 做网站的时候,用到了DATALIST,但是datalist 没有自带的分页控件,后来在网上找了好长时间,看了aspnetpager.dll这个控件,这个控件挺好用的.我把使用方法写出 ...

  9. 基于Bootstrap仿淘宝分页控件实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

随机推荐

  1. Why String is immutable in Java ?--reference

    String is an immutable class in Java. An immutable class is simply a class whose instances cannot be ...

  2. 关于着色器LinearGradient的使用

    LinearGradient我们可以将之译为线型渐变.线型渲染等,译成什么不重要,重要的是它的显示效果是什么样子,今天我们就一起来看看. 先来看看LinearGradient的构造方法: /** Cr ...

  3. 使用DrawerLayout实现QQ5.0侧拉菜单效果

    在上一篇文章中,我们介绍了怎么使用DrawerLayout来实现一个简单的侧拉菜单(使用DrawerLayout实现侧拉菜单),也就是我们常说的抽屉效果,GitHub上类似效果的实现方式非常多,实现出 ...

  4. hysdk代码解析

    navigator 1. navigator.userAgent 浏览器的用户代理字符串 2. navigator.platform 浏览器所在的系统平台 window 1. window.devic ...

  5. Adobe Flash Platform产品介绍

    解释 adobe flash platform flex是一个免费的开源的框架 该应用程序通常是用在 浏览器和 桌面 AIR中的 了解 flex框架 ,Flex sdk 和adobe flash bu ...

  6. Hashtable和HashMap类

    Hashtable和HashMap类有三个重要的不同之处. 第一个不同主要是历史原因.Hashtable是基于陈旧的Dictionary类的,HashMap是Java 1.2引进的Map接口的一个实现 ...

  7. Ajax编程技术

    AJAX:”Asynchronous JavaScript and XML” 中文意思:异步JavaScript和XML. 指一种创建交互式网页应用的网页开发技术. 不是指一种单一的技术,而是有机地利 ...

  8. 利用SQL语句给字段加注释

    EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'角色Id',--注释名称 @level0type=N'SCHEMA' ...

  9. Java编程风格与命名规范整理

    基本命名规范 包命名 包名按照域名的范围从大到小逐步列出,恰好和Internet上的域名命名规则相反. 由一组以“.”连接的标识符构成,通常第一个标识符为符合网络域名的两个或者三个英文小写字母. Pe ...

  10. WEB开发时Browser控件得到C:\fakepath\ 的解决方式

    IE9中JS获得文件上传控件的路径不对,为:C:\fakepath\ 原来要修改:  工具 -> Internet选项 -> 安全 -> 自定义级别 -> 将本地文件上载至服务 ...