<!--_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

 

最后修改于 2019-07-18 12:35:18
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付