Ajax分页已经封装完成 简单快捷使用[可遍历部分属性]

猖良侠

最近写web项目 分页写起来 非常不舒服  又不想用jsp
就自己搞了一个封装好的Ajax分页 代码直接拿起来就可以用

修改自己的请求地址  

注*样式需要导入bootstrap样式会好看一点

好用的话
爱心+++++++++++++++++++++++++++++++++++++
分页查询链接 返回的是一个总数目的int 值  在数据库查总条数就可以了


单页数据查询返回的是一个json格式的数组  
Ajax代码 注*需要导入jquery jar包

[JavaScript] 纯文本查看 复制代码

  var page=1;
        var pageend=0;
        /**
         *
         * 每页条目数量pagecount
         *
         */
        var pagecount=5;
        /**
         *
         * headnames  分页标题名称  按照顺序书写
         *
         */
        var headnames=new Array("id","用户名","where are you from")
        /**
         *
         * notlookattr  不需要遍历的对象属性
         *
         */
        var notlookattr=new Array("pwd")
        /**
         *
         * Numberhref  分页查询 链接
         *
         */
        var Numberhref="/user/selectPzd";

        /**
         *
         * limithref  单页数据查询 链接
         *
         */
        var limithref="/user/selectPzdLimit";
        /**
         *
         * 刷新分页方法*********************    flseh()  *******
         *
         */

        var pagechange=1;
        function  pageTurn(data){
            console.log(data)
            if(data=="?"){
                if(page!=1){
                    page=page-1;
                    flseh();
                }
            }else if(data=="?"){
                if(page!=pageend){
                    page=parseInt(page)+1;
                    flseh();
                }
            }else if(data=="..."){
                var endli=$("#pages li").slice($("#pages li").length-4,$("#pages li").length-3);
                pagechange=endli.text();
                page=pagechange;
                flseh()

            }else if(data=="."){
                var endli=$("#pages li").slice(2,3);
                if(endli.text()!=1){
                    pagechange=parseInt(endli.text())-10;
                    page=pagechange;
                }
                flseh()
            }else{
                page=parseInt(data);
                flseh();
            }
        }
        function flseh(){
            $.post(Numberhref,function (data) {
                $("#pages li").remove();
                pageend=data/pagecount;
                $("#pages").append('<li><a href="#">&#171;</a></li>')
                $("#pages").append('<li><a href="#">.</a></li>')
                for (var i=pagechange;i<data/pagecount+1;i++){
                    $("#pages").append('<li><a href="#">'+i+'</a></li>')
                    if(i-pagechange>10){
                        $("#pages").append('<li><a href="#">...</a></li>')
                        break;
                    }
                }
                $("#pages").append('<li><a href="#">&#187;</a></li>')
            })
            $(".usershead td").remove();
            for (var i = 0; i <headnames.length ; i++) {
                $(".usershead").append('<td>'+ headnames[i]+'</td>')
            }
            $.post(limithref,{begin:(page-1)*pagecount,end:pagecount},function (data) {
                $("#users tr").remove();
                for (var i=0;i<pagecount;i++){
                    $("#users").append('<tr id="'+i+'pagerow"></tr>')
                    Object.getOwnPropertyNames(data[i]).forEach(function (key) {
                        var notlookboo=true;
                        for(var j=0;j<notlookattr.length;j++){
                            if(key==notlookattr[j]){
                                notlookboo=false;
                            }
                        }
                        if(notlookboo){
                            $("tr[id='"+i+"pagerow']").append(('<td>' + data[i][key]+ '</td>'))
                        }
                    })
                }

            })
        }

html代码 注*样式需要导入bootstrap样式会好看一点

[JavaScript] 纯文本查看 复制代码

<table class="table table-hover">
        <thead>
            <tr class="usershead"></tr>
        </thead>
        <tbody id="users">

        </tbody>
    </table>
    <ul class="pagination" id="pages">

    </ul>

11月1日 更新了一下  现在可以通过   notlookattr  数组来删除不需要遍历的对象属性了

广彐水厂

支持楼主

RagnarokRay

学习下！！！

张国荣zz

学习一下，啥都不太会

Mr.Lih

前端要是做数据分页的话  只能一页一页的写吗？

iop19941031

直接vue一梭子解决，让视图和数据分离，到时候出问题好调试

猖良侠

Mr.Lih 发表于 2019-10-31 20:32
前端要是做数据分页的话  只能一页一页的写吗？

没懂你的问题 你可以问的具体点

Mr.Lih

猖良侠 发表于 2019-10-31 22:56
没懂你的问题 你可以问的具体点

比如有很多数据,需要做分页,,一页一页的那种,,这样的话,前端是不是得写好几个页面?

猖良侠

Mr.Lih 发表于 2019-11-1 09:33
比如有很多数据,需要做分页,,一页一页的那种,,这样的话,前端是不是得写好几个页面?

不用的 Ajax 查询  只需要一个信息显示页  查询哪一页的数据就显示哪一页就可以了  只需要一个页面