前端小结2--jQuery分页插件JPaginate的详细使用

拼搏现实的明天。 2022-06-08 00:25 160阅读 0赞

# 前端小结2–jQuery分页插件JPaginate的详细使用 #

java web开发中，后台分页后，前端需要分页按钮来显示。

这里介绍几个好用的jQuery分页插件：[http://www.jq22.com/jquery-info34][http_www.jq22.com_jquery-info34]

对前端搞的少，之前都是jsp，ajax实在是不习惯。

主要介绍一下JPAGINATE这个分页插件的详细使用。JPAGINATE插件链接：

[https://tympanus.net/OldDemos/jPaginate/][https_tympanus.net_OldDemos_jPaginate]

[http://www.jq22.com/jquery-info34][http_www.jq22.com_jquery-info34]

完整测试代码下载链接：  
[http://download.csdn.net/download/yhhyhhyhhyhh/9970760][http_download.csdn.net_download_yhhyhhyhhyhh_9970760]

## <table>   <tbody>    <tr>     <td>1.使用步骤</td>    </tr>   </tbody>  </table> ##

**1.1引入js，css**

**1.2.在页面居中底部放置分页按钮**

**1.3根据div的id触发分页按钮响应，在响应中ajax提交分页参数：pageNum, pageSize（当前页码，每页信息条数）;**

> 下面的第一个函数 `$("#getPageIndex").paginate`为jQuery分页插件的api，
> 
> 第二个函数`function postPageParams(pageNum, pageSize)`为分页按钮触发时的，ajax异步请求。
> 
> `${pageTotalNum}`为服务端返回的总页码数。

## <table>   <tbody>    <tr>     <td>2.效果图</td>    </tr>   </tbody>  </table> ##

![这里写图片描述][SouthEast]  
![这里写图片描述][SouthEast 1]  
![这里写图片描述][SouthEast 2]  
ie下有bug，页码数位置混乱。

[http_www.jq22.com_jquery-info34]: http://www.jq22.com/jquery-info34
[https_tympanus.net_OldDemos_jPaginate]: https://tympanus.net/OldDemos/jPaginate/
[http_download.csdn.net_download_yhhyhhyhhyhh_9970760]: http://download.csdn.net/download/yhhyhhyhhyhh/9970760
[SouthEast]: /images/20220608/a55d4b210c534c31bd333ffed8141583.png
[SouthEast 1]: /images/20220608/5bd43e0fd4a54ffba7717104d90773cc.png
[SouthEast 2]: /images/20220608/fd14ca77b8ce4f9bb673c7fa6a2307a5.png