分页插件Jpages的使用

  项目原因需要前端做分页表格,之前做了一个ul的分页效果,但是感觉自己写还是造*了,今天网上看到Jpqges插件就试了下,感觉平时使用挺方便的,写一下自己的使用过程。

  先上套图,下载下来就2个js和1个css文件,比较轻量,未压缩的js文件算上空格有556行,使用的话需要配合Jquery同时使用。值得一提的是css文件就28行,可以根据需要自行修改为自己需要的样式,也可以放在自己的css文件中,减少请求数量。

  而且这个插件不会更改现有数据区域的原有样式,只是为现有数据添加分页的模块。

分页插件Jpages的使用

使用步骤:

  1.在html中分别引入jPages.min.js、jPages.css和JQuery.js.

  然后在页面中创建需要分页的元素or已有的话直接提取该区域的ID,本例中是用的table,可以换成列表。

  分页插件Jpages的使用

  数据区域演示如图,这里是给table的tbody指定了ID:itemContainer,现在在表格下方添加分页导航的div

  分页插件Jpages的使用

  这里内层的div就是我们的分页容器,只需要指定ID即可,接下来是JS中的配置

  分页插件Jpages的使用

  途中标红的两处分别对应上文中在页面中添加的分页容器和表格,其余的配置请看备注,现在上效果图,

  分页插件Jpages的使用

  很简单的配置,效果就出来了。PS:左下角的信息是我手动添加的。

  

上一篇:分享非常有用的Java程序(关键代码)(八)---Java InputStream读取网络响应Response数据的方法!(重要)


下一篇:Linux Platform驱动模型(二) _驱动方法