文档章节

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

码上中国博客
 码上中国博客
发布于 2016/06/16 15:03
字数 445
阅读 4708
收藏 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文和
这个是前端分页,不是物理分页吧
多功能下拉分页选择插件 - ComboSelect

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

TerryZ
2017/05/31
0
1
19个 jQuery 分页插件和教程,附带实例

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

凯文加内特
2014/04/30
0
0
最火的前端开发框架Bootstrap简单了解

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

mcy0425
09/12
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
多功能下拉分页选择插件 - SelectPage

多功能下拉选择插件 SelectPage 简洁而强大的下拉分页选择器;支持远程数据(AJAX)、 autocomplete、键盘快速导航操作、分页展示、多选标签、i18n国际化支持等多功能的选择器插件 入门指南、...

TerryZ
2017/06/13
0
10

没有更多内容

加载失败,请刷新页面

加载更多

Mac OS X下Maven的安装与配置

Mac OS X 安装Maven: 下载 Maven, 并解压到某个目录。例如/Users/robbie/apache-maven-3.3.3 打开Terminal,输入以下命令,设置Maven classpath $ vi ~/.bash_profile 添加下列两行代码,之后...

TonyStarkSir
今天
3
0
关于编程,你的练习是不是有效的?

最近由于工作及Solution项目的影响,我在重新学习DDD和领域建模的一些知识。然后,我突然就想到了这个问题,以及我是怎么做的? 对于我来说,提升技能的项目会有四种: 纯兴趣驱动的项目。即...

问题终结者
今天
4
0
打开eclipse出现an error has occurred see the log file

解决方法: 1,打开eclipse安装目录下的eclipse.ini文件; 2,打开的文本文件最后添加一行 --add-modules=ALL-SYSTEM 3,保存重新打开Eclipse。...

任梁荣
昨天
4
0
搞定Northwind示例数据库,无论哪个版本的SQLServer都受用

Northwind数据库 从这里可以找到突破口: http://social.msdn.microsoft.com/Forums/zh-CN/Vsexpressvb/thread/8490a1c6-9018-40c9-aafb-df9f79d29cde 下面是MSDN: http://msdn2.microsoft......

QQZZFT
昨天
1
0
mysql主从同步,安装配置操作

准备 两台mysql服务,我这里准备了如下: 主库:192.168.176.128 从库:192.168.176.131 如何在Linux上安装mysql服务,请看https://blog.csdn.net/qq_18860653/article/details/80250499 操作...

小致dad
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部