一个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. hdu1047(Java)大数相加

    题目大意:输入n组数据,每组数据中又有若干长度不大于100的整数,以0结束每组数据的输入,求每组中数据之和.每两组数据输入之间有一行空格,输出也是如此. Integer Inquiry Time Li ...

  2. IEnumerable 和 IQueryable

    共有两组 LINQ 标准查询运算符,一组在类型为 IEnumerable<T> 的对象上运行,另一组在类型为 IQueryable<T> 的对象上运行.构成每组运算符的方法分别 ...

  3. java Spring bean作用域

    1. Singleton作用域 当一个bean的作用域为singleton, 那么Spring IoC容器中只会存在一个共享的bean实例,并且所有对bean的请求,只要id与该bean定义相匹配,则 ...

  4. 第三篇:gradle 编译 Android app 概览

    引言:经过上两篇的论述,我们已经从代码到架构都简单的熟悉了一遍,理论上,只要知道android app的编译过程,我们大可以自己写一份用gradle编译app的插件,插件内将将整个流程用Task的依赖 ...

  5. MVC中如何在controller的action中输出JS到页面上

    MVC中如何在controller的action中输出JS到页面上 可以通过Http上下文对象(httpContext)就可以了,在Action中的HttpContext就是这个Action所指向的页 ...

  6. 【转】浅析Windows编程的剪贴板

    摘要: 本文对Windows剪贴板机制作了深入.全面的阐述,具体内容包括:文本.位图.DSP.自定义格式剪贴板的使用和多数据项和延迟提交技术. 关键词: VC++6.0: 剪贴板机制:数据格式:延迟提 ...

  7. Kettle中通过触发器方式实现数据 增量更新

    在使用Kettle进行数据同步的时候, 共有 1.使用时间戳进行数据增量更新 2.使用数据库日志进行数据增量更新 3.使用触发器+快照表 进行数据增量更新 今天要介绍的是第3中方法. 实验的思路是这样 ...

  8. C++:memset ,memcpy 和strcpy 的根本区别!

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <assert.h&g ...

  9. c#汉字与编码之间的转换(输出十六进制)

    /******************************************************************/ /*********************** ****** ...

  10. javascript DOM 节点 第18节

    <html> <head> <title>DOM对象</title> </head><body><div >DOM对 ...