使用pagnation实现分页

使用pagnation实现分页功能

1.导入依赖包：这两个包分别放在css包中和juqery包中，添加到页面时要将下面的代码放在jQuery引用之后。

<link rel="stylesheet" href="css/pagination.css" />
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>

2.修改jquery.pagination.js原代码。在157行，将回调函数注释掉

// 回调函数
//opts.callback(current_page, this);

3.在要添加分页导航栏的位置处添加下面一行代码

<table>
   <tfoot>
      <tr align="center">
        <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
       </tr>
   </tfoot>
</table>

4.写进行分页导航的js代码:

<script type="text/javascript">
    $(function () {
        // 调用专门的函数初始化分页导航条
        initPagination();

    })
    // 声明一个函数用于初始化Pagination
    function initPagination(){
        // 获取分页数据中的总记录数
        var totalRecord=${requestScope.pageInfo.total};
        // 声明 Pagination 设置属性的 JSON 对象
        var properties={
            num_edge_entries:2, // 边缘页数
            num_display_entries:4, // 主体页数
            callback:pageSelectCallback, // 用户点击“翻页”按钮之后 执行翻页操作的回调函数
            current_page:${requestScope.pageInfo.pageNum-1}, // 当前页， pageNum 从 1 开始， 必须-1 后才可以赋值
            prev_text:"上一页",
            next_text:"下一页",
            items_per_page:${requestScope.pageInfo.pageSize} // 每页显示 1 项
        };
        // 调用分页导航条对应的 jQuery 对象的 pagination()方法生成导航条
        $("#Pagination").pagination(totalRecord,properties)
        // <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
    }
    // 翻页过程中执行的回调函数
    // 点击“上一页”、“下一页”或“数字页码”都会触发翻页动作，从而导致当前函数被调用
    // pageIndex 是用户在页面上点击的页码数值
    function pageSelectCallback(pageIndex,jQuery){
        //pageIndex 是当前页页码的索引，相对于 pageNum 来说，pageIndex 比 pageNum 小 1
        var pageNum=pageIndex+1;
        // 执行页面跳转也就是实现“翻页”
        // 这里的地址要根据自己写的请求地址进行添加
        window.location.href="admin/to/page.html?pageNum="+pageNum;
        // 取消当前超链接的默认行为
        return false;
    }

</script>

自己需要修改的部分：1.${requestScope.pageInfo.total};根据自己的代码写。pageInfo是使用了pagehelper.对从数据库中查询出的list进行了一层封装。代码如下：

service层代码：

@Override
    public PageInfo<Admin> getAdminPageInfo(String keyWord, Integer pageNum, Integer pageSize) {
        // 激活分页插件功能
        PageHelper.startPage(pageNum,pageSize);
        // 从数据库中进行查询
        List<Admin> adminList = adminMapper.selectByKeyWord(keyWord);
        // 转换成页面能够使用的形式，如果不进行转换就要使用js进行处理
        PageInfo<Admin> pageInfo=new PageInfo<>(adminList);

        return pageInfo;
    }

controller层：

@Controller
public class UserController {

    @Autowired
    private AdminService adminService;
    @RequestMapping("admin/to/page.html")
    public String selectPageInfo(
        @RequestParam(value = "keyWord",defaultValue = "") String keyWord,
        @RequestParam(value = "pageNum",defaultValue = "1") Integer pageNum,
        @RequestParam(value = "pageSize",defaultValue = "4") Integer pageSize,
        ModelMap modelMap){
        PageInfo<Admin> adminPageInfo = adminService.getAdminPageInfo(keyWord, pageNum, pageSize);
        // 将查询的admin数据放入到视图中
        modelMap.addAttribute(CrowdConstant.ATTR_ADMIN_PAGE,adminPageInfo);
        return "user";
    }
}