【前端】layui分页总结

方式一（适合使用jstl标签）

1.首先写一个form标签，然后把需要的属性隐藏<input type="hidden">,并获取value值。

<form method="get" action="">
        <div style="float: right;margin-right:60px;padding-bottom: 5px;">
            <input type="text" name="xzxdrmc" value="" placeholder="请输入名称" style="width: 360px; height: 34px; line-height: 34px;" >
            <input type="submit" value="搜索一下"  style="width: 90px; height: 30px; background-color: #ea3e3e; color: #fff; border: 0px; cursor: pointer; margin-left: 10px; line-height: 30px;">
            <c:if test="${pd.currentPage != null}">
                <input id="currentPage" type="hidden" value="${pd.currentPage}" name="currentPage" />
            </c:if>
            <c:if test="${pd.currentPage == null}">
                <input id="currentPage" type="hidden" value="1" name="currentPage" />
            </c:if>
        </div>
    </div>
</form>

2.

<script type="text/javascript">
    var isLoadData;
    $(document).ready(function () {
        initPageControl("${page.currentPage}", "${page.totalResult}");
        $("#divPage").show();
    });
    //分页插件
    function initPageControl(currentPage, dataCount) {
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'divPage' //注意，这里的 test1 是 ID，不用加 # 号
                , count: dataCount //数据总数，从服务端得到
                , curr: currentPage || 1
                , layout: ['count', 'prev', 'page', 'next', 'skip']
                , theme: '#FF0000', jump: function (obj, first) {
                    $(".layui-laypage-btn").css("background", "#FF0000");
                    $(".layui-laypage-btn").css("border", "1px solid #FF0000");
                    $(".layui-laypage-btn").css("color", "white");

                    if (!first) {
                        var url = document.forms[0].getAttribute("action");
                        $("input[name='currentPage']").val(obj.curr);
                        //url = url + obj.curr;
                        document.forms[0].action = url;
                        document.forms[0].submit();
                        //alert(url);
                    }
                }
            });
        });

    }
</script>

3.在合适地方放分页样式

<div id="divPage" style="text-align: center;"></div>

方式二 （适合Ajax写）

1.不需要写input隐藏属性，但需要form标签

2.

 

<script type="text/javascript">
  $(document).ready(function () {
   initPageControl("${page.currentPage}" ,"${page.totalResult}");
   $("#divPage").show();
  });
//分页插件
  function initPageControl(currentPage,dataCount) {
      layui.use('laypage', function () {
          var laypage = layui.laypage;
          //执行一个laypage实例
          laypage.render({
              elem: 'divPage' //注意，这里的 test1 是 ID，不用加 # 号
              , count: dataCount //数据总数，从服务端得到
              , curr: currentPage || 1 
              ,layout: ['count', 'prev', 'page', 'next', 'skip']
              , theme: '#FF0000', jump: function (obj, first) {
                  $(".layui-laypage-btn").css("background","#FF0000");
                  $(".layui-laypage-btn").css("border","1px solid #FF0000");
                  $(".layui-laypage-btn").css("color","white");
                  
               if(!first){ 
                      
                  var url = document.forms[0].getAttribute("action");

                    //把要传的值封装到对象中
                      var parms = location.search;
                      var theRequest = new Object();   
                      if (parms.indexOf("?") != -1) {   
                          var str = parms.substr(1);   
                          strs = str.split("&"); 
                          for(var i = 0; i < strs.length; i++) {  
                             theRequest[strs[i].split("=")[0]]=strs[i].split("=")[1];   
                          }   
                       }       
                      if(url.indexOf('?')>-1){
                       url += "&currentPage="
                      } else{
                       url += "?currentPage=";
                      }
                      url = url + obj.curr + "&PersonName=" + theRequest.PersonName + "&PersonCard=" + theRequest.PersonCard;
                      document.forms[0].action = url;
                      document.forms[0].submit();
                      //alert(url);
                  }
              }
          });
      });  
      
  }

var startAllAppoint = 0;//开始页数
var limitAllAppoint = 10;//每页显示数据条数
function getPageInfo(page) {
 $.ajax(
        type:"post",
        async:false,
        url:"",
        data:{pagecurrent: page},
        success:function(data,status){
            //data=eval("("+data+")");//转化成json
            startAllAppoint = data.currentResult;//当前页数(后台返回)
            totalPageAllAppoint = data.totalPage;//总页数(后台返回)
            var content = "";
            alert(data.list)
            if (!checkEmpty(data.list)) {
             $.each(data.list,function(index,obj){
                var i = 1;
                i += 1;
                content += "<tr>";
                    content += "<td class='center'>"+obj.currentResult+i+"</td>";
                    content += "<td title="+obj.COMPLAINCOMPANYNAME+">"+obj.COMPLAINCOMPANYNAME+"</td>";
                    content += "<td title="+obj.COMPLAINTITLE+">"+obj.COMPLAINTITLE+"</td>";
                    content += "<td title="+obj.COMPLAINCONTENT+">"+obj.COMPLAINCONTENT+"</td>";
                    content += "<td title="+obj.COMPLAINPERSONNAME+">"+obj.COMPLAINPERSONNAME+"</td>";
                    content += "<td title="+obj.COMPLAINPERSONCARD+">"+obj.COMPLAINPERSONCARD+"</td>";
                    content += "</tr>";
             });
            } 
            
          if(data.length>0){
                $("#dataList").html(content);
             }else{
                //$("#page1").hide();
                $("#dataList").html("<br/><span style='width:10%;height:30px;display:block;margin:0 auto;'>暂无数据</span>");
             }

        }
    });
}
  
  </script>

3.同上

<div id="divPage" style="text-align: center;"></div>