文档章节

一个不错的基于Bootstrap的JQuery分页插件,包含table和分页

码上中国博客
 码上中国博客
发布于 2016/06/16 15:03
字数 445
阅读 4744
收藏 8

一个不错的基于Bootstrap的JQuery分页插件,包含table和分页,bootstrap风格,样式优美,完美展示table和分页的功能,同时,支持选择页数,选择每页显示条数,支持显示总条数。

本插件使用时,只需要提供规定格式的数据,同时初始化本插件,即可实现数据的可视化显示。

初始化方法为

首先,在html页面添加如下的标签:

 <div  id="mainTbtable" class='uqt_detail'>
      <table id="UQT_detailTable" class="">
      </table>
  </div>

  <div  id="div_pager" class="page_con" >
  </div>

然后,初始化一个如下格式的json数据,并将其赋值给json变量

[
    {
        "cnName": "数据库部件",
        "id": "order_class_ResEntity?RESDATABASEPART?ResDatabasePart?2.0",
        "lastUpdateTime": "2014-12-02",
        "version": "2.0",
        "desc": "数据库部件",
        "appName": "Inventory",
        "engName": "RESDATABASEPART",
        "classTitle": "ResDatabasePart",
        "fileName": "order_class_ResEntity"
    },
    {
        "cnName": "虚拟机",
        "id": "order_class_component?COMP_RESVM?ResVM?v1.0",
        "lastUpdateTime": "2013-10-22",
        "version": "v1.0",
        "desc": "虚拟机",
        "appName": "Inventory",
        "engName": "COMP_RESVM",
        "classTitle": "ResVM",
        "fileName": "order_class_component"
    },
    {
        "cnName": "服务器",
        "id": "order_class_component?COMP_RESHOST?ResHost?v1.0",
        "lastUpdateTime": "2013-10-22",
        "version": "v1.0",
        "desc": "服务器",
        "appName": "Inventory",
        "engName": "COMP_RESHOST",
        "classTitle": "ResHost",
        "fileName": "order_class_component"
    }
]

最后,在js中调用如下方法 :

refreshData(pageSize, pageNo)

其中,pagesize参数为插件中每页显示的条数,pageNo参数为插件中的要显示的页码

同时,本插件支持数据回调,回调函数同样也是

refreshData(pageSize, pageNo)

因此,如果你想 使用异步刷新和后台交互,需要重写这个方法。

本插件显示效果如下:

 

源码下载,点击http://pan.baidu.com/s/1nuMHAxr

本插件演示,请点击http://www.niubai.net.cn

© 著作权归作者所有

共有 人打赏支持
码上中国博客

码上中国博客

粉丝 53
博文 74
码字总数 70310
作品 1
北京
后端工程师
私信 提问
加载中

评论(1)

POLO文和
POLO文和
这个是前端分页,不是物理分页吧
19个 jQuery 分页插件和教程,附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和...

凯文加内特
2014/04/30
0
0
多功能下拉分页选择插件 - ComboSelect

插件已改名为 SelectPage,本项目不再维护! https://www.oschina.net/p/selectpage 多功能下拉选择插件 功能特点 基于jQuery、Bootstrap2开发 输入自动查找 列表结果分页展示 使用键盘快速操...

TerryZ
2017/05/31
0
1
最火的前端开发框架Bootstrap简单了解

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。 [1] Bootstrap提供了优雅的H...

mcy0425
09/12
0
0
huangdf/seezoon-framework-all

项目介绍 基于spring,mybatis,shiro面向接口开发的的一套后台管理系统,方便快速开发;采用常用的技术栈,降低学习成本,项目完全前后端分离,后端定义统一的接口格式,统一参数校验,统一权...

huangdf
04/20
0
0
可考虑在你下一个项目中使用的 50 个 Bootstrap 插件

可考虑在你下一个项目中使用的 50 个 Bootstrap 插件 作者 jopen 2014-11-12 09:54:16 阅读目录 1. Bootstrap Multiselect 2. Bootstrap Dialog 3. Bootstrap Confirmation 4. Bootstrap Ta......

~少司命~
2015/08/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

thinkphp门窗定制电商平台

这个门窗定制电商平台的目标是,消费者通过门窗定制平台,上传要定制门窗的尺寸数据下订单,电商平台分派订单给厂家商家定制商品,由厂家商家直接发货给消费者。消费者的资金托管在电商平台里...

乐兔CRM
3分钟前
0
0
全局光照---小结

中国龙-扬科
4分钟前
0
0
LAMP架构设置防盗链及访问控制

11月19日任务 11.25 配置防盗链 11.26 访问控制Directory 11.27 访问控制FilesMatch 配置防盗链 为什么要配置防盗链 第三方的站点可以通过引用的方式来获取本服务器上的资源如图片等,但是相...

robertt15
5分钟前
0
0
AWS 推出长期支持的 OpenJDK 免费分发版本 —— Amazon Corretto

简评:听说 Oracle JDK 要收费了,Oracle 要限制 Java 的商业或生产用途,针对这个问题,AWS 将会推出 Amazon Corretto。 Java 是 AWS 用户使用的最流行的编程语言之一,亚马逊一直致力于支持...

极光推送
10分钟前
0
0
Cloudinit如何判断虚拟机为初始化状态

Cloudinit简介 cloudinit是专为云环境中虚拟机的初始化而开发的工具,它从各种数据源读取相关数据并据此对虚拟机进行配置。常见的数据源包括:云平台的metadata服务、ConfigDrive等,常见的配...

空灵飞渡
22分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部