Jquery插件实现分页查询

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'>&lt;上一页</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'>下一页&gt;</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><!-- 引入 echarts.js --><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 onload="initdata()"><div><div class="grid-wrap"><div><input type="text" id="nicheng" placeholder="搜索"><input type="button" onclick="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 class="grid-item"><span class="row-1">zhangxing</span><span class="row-1">24</span><span class="row-1">男</span><span class="row-1">18772351259</span><span class="row-1">浙江西湖</span></div><div class="grid-item"><span class="row-1">lisishan</span><span class="row-1">23</span><span class="row-1">女</span><span class="row-1">17682317584</span><span class="row-1">浙江余杭</span></div> --></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>

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

前端主要分页代码：

var options={        "id":"page",//显示页码的元素    "data":datas,//显示数据    "maxshowpageitem":5,//最多显示的页码个数    "pagelistcount":4,//每页显示数据个数    "callBack":function(result){    var cHtml="";    for(var i=0;i<result.length;i++){    cHtml+="<li>"+ result[i].name+"</li>";//处理数据    }    $("#demoContent").html(cHtml);//将数据增加到页面中    }    };    page.init(datas.length,1,options);

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

其中还囊括了一个模糊查询，笔者前篇博文（链接：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数据）

3.测试

效果图：

第1页数据：

第二页数据：

模糊查询：

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