• 功能描述

     该分页功能不是一次将所有记录都加载出来,然后在点击按钮翻页的时候,通过设置每一条记录的display属性展示或隐藏实现分页的效果。由于后台的获取数据的接口已实现分页的功能,所以在点击翻页按钮时,通过向后台传输页号,以及每页的记录数,即可获取该页的记录,再通过构造字符,将记录添加到table中即可实现分页功能。

  • 实现效果

    

jquery分页的代码下载 jquery实现分页功能_遮罩层

    

jquery分页的代码下载 jquery实现分页功能_获取数据_02

    

jquery分页的代码下载 jquery实现分页功能_分页_03

 

  • 逻辑步骤

    1、定义table,以及相关的button。

    2、定义按钮的响应函数,点击时改变当前的页数,按钮的disabled属性以及清空当前表格中的记录,插入新的记录。

    3、在数据获取的时候,动态地生成和取消遮罩层。

  • 具体实现

    

jquery分页的代码下载 jquery实现分页功能_遮罩层_04

    

jquery分页的代码下载 jquery实现分页功能_分页_05

    

jquery分页的代码下载 jquery实现分页功能_jquery分页的代码下载_06

    

jquery分页的代码下载 jquery实现分页功能_遮罩层_07

    

jquery分页的代码下载 jquery实现分页功能_分页_08

    

jquery分页的代码下载 jquery实现分页功能_分页_09

    

jquery分页的代码下载 jquery实现分页功能_获取数据_10

    

jquery分页的代码下载 jquery实现分页功能_jquery分页的代码下载_11

    

jquery分页的代码下载 jquery实现分页功能_jquery分页的代码下载_12