SSM,AJAX,PageHelper,Layui实现分页功能

写个小增删改查功能的时候,遇到了一些问题,解决后记录一下:

导入相应配置,记得在springmvc 加入:<mvc:annotation-driven />

<!-- Json -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.8.8</version>
        </dependency>
        
        <!-- 分页插件 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.2</version>
        </dependency>
<!-- 分页插件 -->
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <props>
                            <prop key="helperDialect">mysql</prop>
                            <prop key="reasonable">true</prop>
                        </props>
                    </property>
                </bean>
            </array>
        </property>

 

1.打开jsp页面ajax提交请求到后台

<script type="text/javascript">
    showPageNo(1,5);
    var   pageCount = window.localStorage;
    function showPageNo(PageNo,PageSize){
        $.ajax({
            url:'iindex.action',
            type:'post',
            data:{"PageNo":PageNo,"PageSize":PageSize},
            dataType:'json',
            success:function(data){
                $('#tbody').empty();
                 pageCount.setItem("pageCOunt",data.pages);
                 pageCount.setItem("pageCOunts",data.total);
                /* alert(data.length); */
                var data1 = data.list;
                for(var i=0;i<data1.length;i++){
                    /* alert(data[i].cid); */
                $('#tbody').append("<tr id='trpath'>"+
                        "<td>"+data1[i].cid+"</td>"+
                        "<td>"+data1[i].cname+"</td>"+
                        "<td>"+data1[i].cdate+"</td>"+
                        "<td>"+data1[i].cmat+"</td>"+
                        "<td>"+data1[i].ccon+"</td>"+
                        "<td><i class='iconfont' onclick='openUp(this,"+data1[i].cid+")' title='修改'>&#xe600;</i></td>"+
                        "<td><i class='iconfont one' onclick='deleteClient(this,"+data1[i].cid+")' title='删除'>&#xe612;</i></td>"+
                        "<tr/>");
                }  

            },error:function(){
                layer.msg('数据异常',{icon:2,time:2000});
            }
        });
}

</script>

2.controller内接收并返回pagehelper类,@ResponseBody 转为json类型

@RequestMapping("/iindex")
    @ResponseBody
    public PageInfo<Client> getAll(@RequestParam(defaultValue = "1") int PageNo,
            @RequestParam(defaultValue = "5") int PageSize) {
        System.out.println("进来了--------------------------");
        List<Client> clients = clientServiceImpl.getAll(PageNo, PageSize);
        /* ModelAndView modelAndView = new ModelAndView(); */
        PageInfo<Client> pageInfo = new PageInfo<Client>(clients);
        /*
         * modelAndView.addObject("clients", pageInfo.getList());
         * modelAndView.setViewName("index");
         */
        List<Client> lists = pageInfo.getList();
        for (int i = 0; i <lists.size(); i++) {
            System.out.println(lists.get(i));
        }
        System.out.println(pageInfo.getPages());
        System.out.println(pageInfo.getPageNum());
        System.out.println(pageInfo.getNavigateFirstPage());
        System.out.println(pageInfo.getNavigateLastPage());
        System.out.println(pageInfo.getTotal());
        return pageInfo;
    }

layui组件

<script>
    layui.use('laypage',function(){
        console.log(pageCount);
            var laypage = layui.laypage;
               laypage.render({
                elem: 'page'
                ,count: pageCount.getItem("pageCOunts")*2
                ,theme: '#1E9FFF'
                ,jump:function(obj,first){
                 // obj 存储当前分页信息
                    if(!first){ // 第一加载不执行
                        showPageNo(obj.curr,5);
                    }
                }
              });
        });
        </script>

SSM,AJAX,PageHelper,Layui实现分页功能

上一篇:EF如何分页最大优化


下一篇:页面渲染大量数据的性能优化(时间分片)