Jquery插件实现分页查询

梦里梦外; 2022-06-11 23:25 406阅读 0赞

## 1.场景分析 ##

近期在项目中很多地方都用到了分页查询，今天笔者就前端的Jquery插件实现分页详细地跟大家讲解下，希望能帮助到需要的各位！

## 2.实现方案 ##

①page.css样式代码

.page{
            list-style: none;
            }
            .page>li{
            float: left;
            padding: 5px 10px;
            cursor: pointer;
            }
            .page .pageItem{
            border: solid thin #DDDDDD;
            margin: 5px;
            }
            .page .pageItemActive{
            border: solid thin #0099FF;
            margin: 5px;
            background-color: #0099FF;
            color:white;
            }
            .page .pageItem:hover{
            border: solid thin #0099FF;
            background-color: #0099FF;
            color:white;
            }
            .page .pageItemDisable{
            border: solid thin #DDDDDD;
            margin: 5px;
            background-color: #DDDDDD;
            }

②page.js动效代码

/** * Created by zhangxing on 2017/4/26. */ var  page = {
                "pageId":"",
            "data":null,
            "maxshowpageitem":5,//最多显示的页码个数
            "pagelistcount":10,//每一页显示的内容条数
            "init":function(listCount,currentPage,options){
            this.data=options.data,
            this.pageId=options.id,
            this.maxshowpageitem=options.maxshowpageitem,//最多显示的页码个数
            this.pagelistcount=options.pagelistcount//每一页显示的内容条数
            page.initPage(listCount,currentPage);
            },
            /** * 初始化数据处理 * @param listCount 列表总量 * @param currentPage 当前页 */ "initPage":function(listCount,currentPage){
            var maxshowpageitem = page.maxshowpageitem;
            if(maxshowpageitem!=null&&maxshowpageitem>0&&maxshowpageitem!=""){
            page.maxshowpageitem = maxshowpageitem;
            }
            var pagelistcount = page.pagelistcount;
            if(pagelistcount!=null&&pagelistcount>0&&pagelistcount!=""){
            page.pagelistcount = pagelistcount;
            }
            page.pagelistcount=pagelistcount;
            if(listCount<0){
            listCount = 0;
            }
            if(currentPage<=0){
            currentPage=1;
            }
    
            page.setPageListCount(listCount,currentPage);
            },
            /** * 初始化分页界面 * @param listCount 列表总量 */ "initWithUl":function(listCount,currentPage){
            var pageCount = 1;
            if(listCount>=0){
            var pageCount = listCount%page.pagelistcount>0?parseInt(listCount/page.pagelistcount)+1:parseInt(listCount/page.pagelistcount);
            }
            var appendStr = page.getPageListModel(pageCount,currentPage);
            $("#"+page.pageId).html(appendStr);
            },
            /** * 设置列表总量和当前页码 * @param listCount 列表总量 * @param currentPage 当前页码 */ "setPageListCount":function(listCount,currentPage){
            listCount = parseInt(listCount);
            currentPage = parseInt(currentPage);
            page.initWithUl(listCount,currentPage);
            page.initPageEvent(listCount);
            page.viewPage(currentPage,listCount,page.pagelistcount,page.data)
    //      fun(currentPage);
            },
            //页面显示功能
            "viewPage":function (currentPage,listCount,pagelistcount,data){
            var NUM=listCount%pagelistcount==0?listCount/pagelistcount:parseInt(listCount/pagelistcount)+1;
            if(currentPage==NUM){
            var result=data.slice((currentPage-1)* pagelistcount,data.length);
            }
            else{
            var result=data.slice((currentPage-1)*pagelistcount,(currentPage-1)*pagelistcount+pagelistcount);
            }
            options.callBack(result);
            },
            "initPageEvent":function(listCount){
            $("#"+page.pageId +">li[class='pageItem']").on("click",function(){
            page.setPageListCount(listCount,$(this).attr("page-data"),page.fun);
            });
            },
            "getPageListModel":function(pageCount,currentPage){
            var prePage = currentPage-1;
            var nextPage = currentPage+1;
            var prePageClass ="pageItem";
            var nextPageClass = "pageItem";
            if(prePage<=0){
            prePageClass="pageItemDisable";
            }
            if(nextPage>pageCount){
            nextPageClass="pageItemDisable";
            }
            var appendStr ="";
            appendStr+="<li class='"+prePageClass+"' page-data='1' page-rel='firstpage'>首页</li>";
            appendStr+="<li class='"+prePageClass+"' page-data='"+prePage+"' page-rel='prepage'><上一页</li>";
            var miniPageNumber = 1;
            if(currentPage-parseInt(page.maxshowpageitem/2)>0&&currentPage+parseInt(page.maxshowpageitem/2)<=pageCount){
            miniPageNumber = currentPage-parseInt(page.maxshowpageitem/2);
            }else if(currentPage-parseInt(page.maxshowpageitem/2)>0&&currentPage+parseInt(page.maxshowpageitem/2)>pageCount){
            miniPageNumber = pageCount-page.maxshowpageitem+1;
            if(miniPageNumber<=0){
            miniPageNumber=1;
            }
            }
            var showPageNum = parseInt(page.maxshowpageitem);
            if(pageCount<showPageNum){
            showPageNum = pageCount;
            }
            for(var i=0;i<showPageNum;i++){
            var pageNumber = miniPageNumber++;
            var itemPageClass = "pageItem";
            if(pageNumber==currentPage){
            itemPageClass = "pageItemActive";
            }
    
            appendStr+="<li class='"+itemPageClass+"' page-data='"+pageNumber+"' page-rel='itempage'>"+pageNumber+"</li>";
            }
            appendStr+="<li class='"+nextPageClass+"' page-data='"+nextPage+"' page-rel='nextpage'>下一页></li>";
            appendStr+="<li class='"+nextPageClass+"' page-data='"+pageCount+"' page-rel='lastpage'>尾页</li>";
            return appendStr;
    
            }
            }

③主页面query.html代码

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    
    <link rel="stylesheet" href="css/gongchang-style.css" />
    <link href="css/page.css" type="text/css" rel="stylesheet"/>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/page.js"></script>
    <script type="text/javascript" src="js/jQuery.js"></script>
    <script src="js/echarts.js"></script>
    
    </head>
    <body οnlοad="initdata()">
    <div>
    
    <div class="grid-wrap">
    <div>
    <input type="text" id="nicheng" placeholder="搜索">
    <input type="button" οnclick="search()" value="搜索">
    
    </div>
    <div class="grid"  id="grid1">
    <div class="grid-header" id="grid1">
    <span class="row-1">姓名</span>
    <span class="row-1">年龄</span>
    <span class="row-1">性别</span>
    <span class="row-1">手机号码</span>
    <span class="row-1">居住地址</span>
    </div>
    <div class="grid-body">
    
    
    </div>
    </div>
    
    </div>
    
    <div class="page" id="page"></div>
    
    
    </div>
    
    <script type="text/javascript">
    
            var options;
    
            /**初始函数 * [initdata description] * @return {[type]} [description] */ function initdata(){
    
            alert("进来了");
            $.ajax({
            type: "get",
            url: "http://localhost:8080/userInfo/getUserInfo",
            success: function(data, textStatus){
            alert(data.userInfoList[1].username);
            if(data.status == 1){
            var datas = data.userInfoList;
            alert(datas);
            options={
            "id":"page",//显示页码的元素
            "data":datas,//显示数据
            "maxshowpageitem":5,//最多显示的页码个数
            "pagelistcount":3,//每页显示数据个数
            "callBack":function(result){
            alert(result);
            var cHtml="";
            for(var i=0;i<result.length;i++){
            cHtml+='<div class="grid-item">\
    <span class="row-1">'+result[i].username+'</span>\
    <span class="row-1">'+result[i].age+'</span>\
    <span class="row-1">'+result[i].sex+'</span>\
    <span class="row-1">'+result[i].phone+'</span>\
    <span class="row-1">'+result[i].address+'</span>\
    </div>'
    
            }
            $(".grid-body").html(cHtml);
            }
            };
            page.init(datas.length,1,options);
    
            }
    
            },
            complete: function(XMLHttpRequest, textStatus){
    
            },
            error: function(){
            alert("请求网络失败！。。。。。。");
            }
            });
            }
    
    
    /**模糊搜索 * [search description] * @return {[type]} [description] */ function search(){
            var nicheng =document.getElementById("nicheng").value;
            $('.grid-item').remove();
    
            $.ajax({
            type: "get",
            url: "http://localhost:8080/userInfo/getUserInfoByName?username="+nicheng,
            success: function(data, textStatus){
            if(data.status == 1){
            var addHtml = "";
            var result = data.userlist;
            for (var j =0;j<data.userlist.length;j++) {
    
            addHtml+='<div class="grid-item">\
    <span class="row-1">'+result[j].username+'</span>\
    <span class="row-1">'+result[j].age+'</span>\
    <span class="row-1">'+result[j].sex+'</span>\
    <span class="row-1">'+result[j].phone+'</span>\
    <span class="row-1">'+result[j].address+'</span>\
    </div>'
    
            }
            $(".grid-body").html(addHtml);
            }
    
            },
            complete: function(XMLHttpRequest, textStatus){
    
            },
            error: function(){
            alert("请求网络失败！。。。。。。");
            }
            });
            }
    
    
    </script>
    </body>
    </html>

其中这里涉及到前端的动态数据渲染，这里需要大家细细咀嚼，方能领悟其中的精髓！

前端主要分页代码：

按照上述样式进行集成即可；

其中还囊括了一个模糊查询，笔者前篇博文（链接：[http://blog.csdn.net/zhangxing52077/article/details/73744779][http_blog.csdn.net_zhangxing52077_article_details_73744779]）已经深刻剖析，于此不赘述！

④后台controller

@RequestMapping(value = "/getUserInfo", produces = "application/json;charset=utf-8")
    public Map<String,Object> getUserInfo(HttpServletResponse response ,
          @RequestParam(required=false,defaultValue="1") Integer pageNum,
          @RequestParam(required=false,defaultValue="3") Integer pageSize){
        response.setHeader("Access-Control-Allow-Origin","*");
        List<UserInfo> userList = userInfoService.getUserInfo();
        Map<String,Object> map = new HashMap<>();
        map.put("userInfoList",userList);
        map.put("status",1);
        return map;
    }

⑤ 后台请求的接口返回全部的json数据（也就是Jquery插件恰好需要的datas数据）

![Center][]

## 3.测试 ##

效果图：

第1页数据：

![Center 1][]

第二页数据：

![Center 2][]

模糊查询：

![Center 3][]

好了，今天的Jquery分页插件就点到为止了，需要源码的及时私信我！我是张星，欢迎加入博主技术交流群，群号：313145288

[http_blog.csdn.net_zhangxing52077_article_details_73744779]: http://blog.csdn.net/zhangxing52077/article/details/73744779
[Center]: /images/20220612/7de2557858fb4d1d90dd94484bfda013.png
[Center 1]: /images/20220612/fcec64e26eb24165afb711c62c2eafe3.png
[Center 2]: /images/20220612/fcda609777a44dfcbdae0508c6c35642.png
[Center 3]: /images/20220612/5782498597cb489a995c7a8d3b08a9ec.png