文档章节

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

码上中国博客
 码上中国博客
发布于 2016/06/16 15:03
字数 445
阅读 4650
收藏 8
点赞 1
评论 1

一个不错的基于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

© 著作权归作者所有

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

码上中国博客

粉丝 52
博文 72
码字总数 70310
作品 1
北京
后端工程师
加载中

评论(1)

POLO文和
POLO文和
这个是前端分页,不是物理分页吧
多功能下拉分页选择插件 - SelectPage

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

TerryZ ⋅ 2017/06/13 ⋅ 10

huangdf/seezoon-framework-all

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

huangdf ⋅ 04/20 ⋅ 0

一个女生对BootStrap的感情

首先说明一下,姐我不是很聪明,但是也做设计,也做前端,同时在移动互联网行业中也混了多年,感触颇多,打算开始记录一下脚步,希望对后来的小弟弟×××们有那么一点帮助,也算一件高兴的事...

BootStrap之路 ⋅ 04/25 ⋅ 0

使用easyui的DataGrid实现即时编辑(CRUD)

首先来个users.sql /MySQL Data TransferSource Host: localhostSource Database: mydbTarget Host: localhostTarget Database: mydbDate: 2011/6/3 13:59:12/ SET FOREIGNKEYCHECKS=0; -- T......

styleman ⋅ 05/10 ⋅ 0

jQuery-File-Upload 使用文档(翻译)

最近要用到多图上传,准备使用这个插件,但是没搜到相关的文档,只有官方的文档,主要是以有道翻译和个人理解为主 可能会有一些问题,但是比看原文是方便一些. 使用文档 插件的基本信息 插件demo ...

employeeee ⋅ 05/14 ⋅ 0

Jquery+Ajax+Bootstrap Paginator实现分页的拼接

效果图如下 jsp页面引入bootstrap样式,jquery和bootstrap-paginator.js jsp页面代码,页面两个div,一个用于拼接html,一个放分页按钮代码 js代码: 测试通道,如果想要测试完整效果,css源...

祈澈姑娘 ⋅ 06/19 ⋅ 0

JS生成二维码 jquery.qrcode 插件

使用jquery.qrcode生成二维码 二维码应用已经成为app 和网页的标配,那么在开发中不少人问,怎么生成二维码,现在我就讲解一种 js 直接生成图片的方法,后台都无需参与,前端就是牛 本文将介...

xllily_11 ⋅ 2017/11/14 ⋅ 0

vue结合bootstrap4.0使用

一般vue都是结合elementui 、mint-ui等使用,但是自己还是想结合bootstrap来使用,在使用的过程中遇到一些报错 使用bootstrap 要结合jQuery来使用的,首先要安装依赖 npm install jquery --s...

杏sunshine ⋅ 05/16 ⋅ 0

asp.net 实现在线打印功能,jQuery打印插件PrintArea实现自动分页

使用的组件:jQuery打印插件PrintArea,有兴趣的可以研究一下。 使用方法略过,这里将介绍如何实现打印多页是可以分页。 现在提供两种方法思路: 1、根据特定的打印机型号和使用的纸张类型,...

easonjim ⋅ 2015/10/18 ⋅ 0

PHP学习路线图 最全PHP自学指南

对于广大零基础的PHP自学者,往往不知道如何系统的学习PHP,导致平白浪费了很多时间。本文将为大家带来最详细的php学习路线图,同时还会附上相应的权威教程,让广大PHP自学者少走许多弯路。 ...

W3Cschool小编 ⋅ 04/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

从 Confluence 5.3 及其早期版本中恢复空间

如果你需要从 Confluence 5.3 及其早期版本中的导出文件恢复到晚于 Confluence 5.3 的 Confluence 中的话。你可以使用临时的 Confluence 空间安装,然后将这个 Confluence 安装实例升级到你现...

honeymose ⋅ 今天 ⋅ 0

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 今天 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 今天 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 今天 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 今天 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部