项目原因需要前端做分页表格,之前做了一个ul的分页效果,但是感觉自己写还是造*了,今天网上看到Jpqges插件就试了下,感觉平时使用挺方便的,写一下自己的使用过程。
先上套图,下载下来就2个js和1个css文件,比较轻量,未压缩的js文件算上空格有556行,使用的话需要配合Jquery同时使用。值得一提的是css文件就28行,可以根据需要自行修改为自己需要的样式,也可以放在自己的css文件中,减少请求数量。
而且这个插件不会更改现有数据区域的原有样式,只是为现有数据添加分页的模块。
使用步骤:
1.在html中分别引入jPages.min.js、jPages.css和JQuery.js.
然后在页面中创建需要分页的元素or已有的话直接提取该区域的ID,本例中是用的table,可以换成列表。
数据区域演示如图,这里是给table的tbody指定了ID:itemContainer,现在在表格下方添加分页导航的div
这里内层的div就是我们的分页容器,只需要指定ID即可,接下来是JS中的配置
途中标红的两处分别对应上文中在页面中添加的分页容器和表格,其余的配置请看备注,现在上效果图,
很简单的配置,效果就出来了。PS:左下角的信息是我手动添加的。