LayPageTool超强带参分页,完全分装,不用二次配置(已在多个项目中运行)

博客:www.sudo.ren

html:

<!--_meta 作为公共模版分离出去-->
#include("/common/_meta.html")
<!--/meta 作为公共模版分离出去-->

<title>所属用户</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 系统管理 <span class="c-gray en">&gt;</span> 角色管理 <span class="c-gray en">&gt;</span> 所属用户 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
   <div class="text-c">
   </div>
   <div class="mt-20">
   <input type="hidden" id="roleid" name="roleid" value="#(roleid)">
   <table id="layTab" class="table table-border table-bordered table-hover table-bg table-sort">
      <thead>
         <tr class="text-c">
            <th width="40">ID</th>
            <th width="120">姓名</th>
            <th width="120">登录名</th>
         </tr>
      </thead>
      <tbody>

      </tbody>
   </table>
      <!--<div id="tabpage" class="text-r" style="padding-top:5px;"></div>-->
   </div>
</div>
<!--_footer 作为公共模版分离出去-->
#include("/common/_footer.html")
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="#(ctx_path)/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="#(ctx_path)/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="#(ctx_path)/lib/laypage/1.2/LayPageTool.js"></script>
<script type="text/javascript" src="#(ctx_path)/lib/JSUtils/Tools.js"></script>
<script type="text/javascript">

/****---------table + 分页----start------****/
    var G_pageSize = 10;//每一页的数量
    var G_pageNumber;//当前页

   $(function(){
        initData(G_pageSize,G_pageNumber);
   })
   function member_sele(){
      initData(G_pageSize,G_pageNumber);
    }
    
   function initData(Size,Number){
      //初始化第一页数据
       Number = Number || 1;
       var parms = {"pageNumber":Number,"pageSize":Size,"roleid":"#(roleid)"};
       $.ajax({
           type: 'POST',
           url: '#(ctx_path)/admin/userList/loadSysUserByRid',
           data: parms,
           dataType: 'json',
           success: function (data) {
               var totalPage = data.totalPage;//总页数
               var pageNumber = data.pageNumber;//当前页
               var totalRow = data.totalRow;//总条数
   
               //拼凑html
               htmlStr(data.list,$(".table-sort tbody"));
               //分页
               var arr = ["#(roleid)"];
               LayPage('layTab',totalPage,totalRow,pageNumber ,"initData",arr);
           },
           error:function (data) {
               console.log(data.msg);
           }
       });
   }

/****---------table + 分页---end-------****/

function htmlStr(data,tbody){
    var html = "";
    $(tbody).html("");
    for (var i = 0; i < data.length; i++) {
        html += "<tr class=\"text-c\">";
        html += "<td>" + data[i].id + "</td>";
        html += "<td>" + data[i].nick + "</td>";
        html += "<td>" + data[i].username + "</td>";
        html += "</tr>";
    }
    $(tbody).html(html);
}

</script>

</body>
</html>


LayPageTool.js(还需要layPage.js的支持)LayPage(tabId,总页数,总行数,当前页码,当前函数,查询参数--数组)

function LayPage(tab,totalPage,totalRow,pageNumber,fn,arr){

    $("#tabPage").remove();
    var div = document.createElement("div");
    $(div).attr("id","tabPage");
    $(div).attr("class","text-r");
    $(div).css("paddingTop","5px");
    $("#"+tab).after($(div));

    laypage({
        cont: 'tabPage', //容器。值支持id名、原生dom对象,jquery对象。
        pages: totalPage, //通过后台拿到的总页数
        count:totalRow,
        curr: pageNumber || 1, //当前页
        groups: 5,//连续显示分页数
        skip: true, //是否开启跳页
        first:'首页',
        last:'尾页',
        //prev:'<',
        //next:'>',
        layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
        jump: function(obj, first){ //触发分页后的回调
            //当前页码/总页码 共xxxx条记录
            if(!first){ //一定要加此判断,否则初始时会无限刷新(不是第一页就会执行)
                pageNumber = obj.curr;
                if(typeof(eval(fn)) == "function") {
                    var Str = "";
                    if (arr != undefined){
                        for (var i=0;i<arr.length;i++){
                            if (arr[i] != undefined){
                                Str += ",'" + arr[i] + "'";
                            }
                        }
                    }
                    eval(fn + "(" + G_pageSize + "," + pageNumber + Str + ")");
                }else{
                    alert("该函数不存在");
                }
            }
            var str = "当前页码" + pageNumber + "/总页码" + totalPage + "&nbsp;&nbsp;共" + totalRow + "条记录";
            $("#tabPage").append(str);
        }
    });
}


即可实现如下分页(带参分页):

image.png

评论区

JFinal

2019-07-09 21:28

一般情况建议使用 jfinal demo 中的 layout 函数来布局,当前你的布局方式在 _meta.html 中的 html 标签是不成对的,一部分在 _meta.html 中,一部分在你当前的页面中

杜福忠

2019-07-09 21:29

据说字符串拼接用html.push(XXX, XXX, XXX) 最后 $(tbody).html(html.join(''));能快不少特别是翻很多页的时候

为道日损

2019-07-10 08:47

@JFinal layout还没有用过,我去试试看

为道日损

2019-07-10 08:48

@杜福忠 好的,我去体验一下

workbgm

2019-07-10 11:08

不明白,这个不是很简单的东西么

为道日损

2019-07-10 14:12

@workbgm 你这么一说,我也有点懵了,感觉 不该分享出来哈哈哈

山东小木

2019-07-12 11:49