分页

分页

<link href="/static/js/bootstrap3/css/bootstrap.min.css" rel="stylesheet"/><link href="/static/js/bootstrap3/css/bootstrap-theme.min.css" rel="stylesheet"/><script src="/static/js/jquery.js"></script><script src="/static/js/bootstrap3/js/bootstrap.min.js"></script><div class="page">     <div style="float:left;display:inline;height:75px;line-height:75px;">         <span>              每页             <select id="pageSize" aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length" onchange="changePageSize()">                  <option selected="selected" value="10">10</option>                  <option value="25">25</option>                  <option value="50">50</option>                  <option value="100">100</option>             </select>                   条记录                共<span id="count"></span> / <span id="totalPage"></span>页        </span>    </div>    <div style="float:right;display:inline;height:75px;line-height:75px;margin-right:20px;">        <input type="hidden" id="pageNum" value="1" />        <ul class="pagination myPage"></ul>    </div></div><script>    //查询    function getPage(){        var pageSize = $("#pageSize").val();//每页显示数        var pageNum = $("#pageNum").val();//当前页码        //请求后端        $.ajax({            type: "post",            url: "/user/userlist",            data:{//参数                "param": $("#username").val(),                "pageSize": pageSize,                "pageNum": pageNum,            },            dataType:"json",            success: function(result){                //操作返回list                listPage(result.count);//count为记录数            }        });    }        //ajax方式查询,返回count就行,pageSize、pageNum当前页面有    //页面跳转的方式查询,需要返回count、pageSize、pageNum    function listPage(count){        var pageSize = parseInt($("#pageSize").val());//每页显示数        //$("#pageSize").val(pageSize);        var pageNum = parseInt($("#pageNum").val());//当前页码        //$("#pageNum").val(pageNum);        //共多少页        var len = Math.ceil(count / pageSize);        $("#count").html(count);        $("#totalPage").html(len);        //显示5个页码        var len_start;        var total_show_Num = 5;//显示多少个页码,默认5个        if(len <= total_show_Num){            len_start = 1;            total_show_Num = len;        }else{            if(pageNum==1 || pageNum==2 || pageNum==3){                len_start = 1;                total_show_Num = 5;            }else if(pageNum==len || pageNum==len-1 || pageNum==len-2){                len_start = len - 4;                total_show_Num = len;            }else{                len_start = pageNum - 2;                total_show_Num = pageNum + 2;            }        }        //上一页        $(".myPage").html("<li id='prePageLi'><a href='javascript:;' onclick='prePage();'>上一页</a></li>");        for(var i=len_start; i<=total_show_Num; i++){            $(".myPage").append("<li id='pageLi"+i+"'><a href='javascript:;' onclick='page("+i+");' id='page"+i+"'>"+i+"</a></li>");        }        //下一页        $(".myPage").append("<li id='nextPageLi'><a href='javascript:;' onclick='nextPage();'>下一页</a></li>");        //上一页、下一页 显示与隐藏        hidePage(pageNum, len);        //添加当前页样式        $("#pageLi"+pageNum).addClass("active");        //当前页不能点击        $("#page"+pageNum).removeAttr("onclick");    }    //上一页    function prePage(){        var nowPageNum = $("#pageNum").val();         var prePageNum = parseInt(nowPageNum) - 1;         $("#pageNum").val(prePageNum);        getPage();    }    //下一页    function nextPage(){        var nowPageNum = $("#pageNum").val();         var nextPageNum = parseInt(nowPageNum) + 1;         $("#pageNum").val(nextPageNum);        getPage();    }    //查询--直接点击页码    function page(pageNum){        $("#pageNum").val(pageNum);        getPage();    }    //上一页、下一页 显示与隐藏    function hidePage(pageNum, len){        if(pageNum <= 1){            document.getElementById('prePageLi').style.display="none";        }else{            document.getElementById('prePageLi').style.display="";        }        if(pageNum >= len){            document.getElementById('nextPageLi').style.display="none";        }else{            document.getElementById('nextPageLi').style.display="";        }    }    //每页显示记录数--select事件    function changePageSize(){        $("#pageNum").val(1);//每页显示数变更后，从第一页开始查询        getPage();    }</script>