zoukankan      html  css  js  c++  java
  • PageInfo 前台分页js,带分页栏

    在使用mybatis3,并且使用分页,PageHelper 接口,分页还是很好使用的。使用pageInfo的后台分页接口。

    /**
     * 
     * @param switchPage方法,切换页码方法
     * 
     * function switchPage(pageNum){
            $("input[name='pageNum']").val(pageNum);
             $("#blgTable tr:gt(0)").remove();
            getLuoJiaoDianResult();
            
        }
     * 
     * @getResult() 获取结果集方法
     * 
     * function getLuoJiaoDianResult(){
            var dat=serializeObject("#dizhi");
            $.post("${BASE_PATH}dz/list",dat,function(data){
                $("#blgTable tr:gt(0)").remove();
                    var option="";
                    if(data.list.length==0){
                        option+="<tr><td colspan='6'> 没有符合条件的查询结果!</td></tr>"
                            
                    }else{
                        $(data.list).each(function(i){
                            if(this.fenquzhihuibu==null){
                                this.fenquzhihuibu="";
                            }
                            if(this.paichusuo==null){
                                this.paichusuo="";
                            } 
                            
                            if(i%2==0){
                                option+="<tr style='background:rgb(243, 248, 251)'>";
                            }else{
                                option+="<tr style='background:rgb(226, 237, 247)'>";
                            }
                            option+="<td>"+this.xingming+"</td><td>"+
                            this.shenfenzheng+"</td><td>"+this.dizhi+"</td><td> "+
                            this.fenquzhihuibu+" </td><td>"+this.paichusuo+"</td><td><a onclick=selectPersonInfo('"+this.personid+"') >详情</a></td></tr>";
                            
                        });
                        }
                        pageInfoBar(data,"pagebar");
                        $("#blgTable").append(option);
                    
                },"json");
        }
     * 
     * 
     * 
     * 获取分页导航条
     * @param pageInfo 
     * @param barDivId
     */
    function pageInfoBar(pageInfo, barDivId) {
        var barDiv = $("#" + barDivId);
        var context = "<span>当前页:" + pageInfo.pageNum + "&nbsp;总页数:"
                + pageInfo.pages + "&nbsp;&nbsp;总记录数:"+pageInfo.total+"</span>";
        context += "<div class='query-content-page-btn'><ul>";
        if (pageInfo.pageNum > 1) {
            context += "<li class='prev-next' onclick=switchPage('"
                    + pageInfo.prePage + "')>上一页</li>";
        }
        for (var i = 0; i < pageInfo.navigatepageNums.length; i++) {
            if (pageInfo.pageNum == pageInfo.navigatepageNums[i]) {
                context += "<li class='query-content-page-cur' onclick=switchPage('"
                        + pageInfo.navigatepageNums[i]
                        + "')>"
                        + pageInfo.navigatepageNums[i] + "</li>"
            } else {
                context += "<li onclick=switchPage('"
                        + pageInfo.navigatepageNums[i] + "')>"
                        + pageInfo.navigatepageNums[i] + "</li>"
            }
    
        }
    
        if (pageInfo.pageNum < pageInfo.pages) {
            context += "<li class='bus-border-right prev-next' onclick=switchPage('"
                    + pageInfo.nextPage + "')>下一页</li>";
        }
        context += "</ul></div>";
        barDiv.html(context);
    }
  • 相关阅读:
    前端文档
    vue手写骨架屏插件
    vue3 todolist
    微信公众号(小程序)利用客服接口主动给用户发送消息的方法
    使用docker-compose管理docker容器
    docker常用操作
    Declarative Pipeline语法介绍
    k8s集群dns问题解决办法
    K8S集群安装(四)使用helm安装应用
    k8s常用yaml-nginx、busybox
  • 原文地址:https://www.cnblogs.com/sloveling/p/Page_info.html
Copyright © 2011-2022 走看看