Home > Web Front-end > JS Tutorial > body text

A very easy-to-use front-end paging js tool class

一个新手
Release: 2017-09-29 09:43:26
Original
1876 people have browsed it

Share your own encapsulated front-end paging js tool class. The following is a screenshot of the default style effect

You can change js and css at will. It is very flexible

/**
* pageSize,  每页显示数
* pageIndex, 当前页数  
* pageCount  总页数
* url  连接地址
* pager(10, 1, 5, 'Index')使用方法示例
*/
function pager(pageSize, pageIndex, pageCount, url) {
    var intPage = 7;  //数字显示
    var intBeginPage = 0;//开始的页数
    var intEndPage = 0;//结束的页数
    var intCrossPage = parseInt(intPage / 2); //显示的数字
    var strPage = "<div class=&#39;fr&#39;><span class=&#39;pageinfo&#39;>第 <font color=&#39;#FF0000&#39;>" + pageIndex + "/" + pageCount + "</font> 页 每页 <font color=&#39;#FF0000&#39;>" + pageSize + "</font> 条</span>";
    if (pageIndex > 1) {
        strPage = strPage + "<a class=&#39;pageNav&#39; onclick=&#39;" + url + "(1," + pageSize + ")&#39;><span>首页</span></a> ";
        strPage = strPage + "<a class=&#39;pageNav&#39; onclick=&#39;" + url + "(" + (pageIndex - 1) + "," + pageSize + ")&#39;><span>上一页</span></a> ";
    }
    if (pageCount > intPage) {//总页数大于在页面显示的页数
        if (pageIndex > pageCount - intCrossPage) {//当前页数>总页数-3
            intBeginPage = pageCount - intPage + 1;
            intEndPage = pageCount;
        }
        else {
            if (pageIndex <= intPage - intCrossPage) {
                intBeginPage = 1;
                intEndPage = intPage;
            }
            else {
                intBeginPage = pageIndex - intCrossPage;
                intEndPage = pageIndex + intCrossPage;
            }
        }
    } else {
        intBeginPage = 1;
        intEndPage = pageCount;
    }
    if (pageCount > 0) {
        for (var i = intBeginPage; i <= intEndPage; i++) {
            {
                if (i == pageIndex) {//当前页
                    strPage = strPage + " <a class=&#39;current&#39; href=&#39;javascript:void(0);&#39;>" + i + "</a> ";
                }
                else {
                    strPage = strPage + " <a class=&#39;pageNav&#39; onclick=&#39;" + url + "(" + i + "," + pageSize + ")&#39; title=&#39;第" + i + "页&#39;>" + i + "</a> ";
                }
            }
        }
    }
    if (pageIndex < pageCount) {
        strPage = strPage + "<a class=&#39;pageNav&#39; onclick=&#39;" + url + "(" + (pageIndex + 1) + "," + pageSize + ")&#39;><span>下一页</span></a> ";
        strPage = strPage + "<a class=&#39;pageNav&#39; onclick=&#39;" + url + "(" + pageCount + "," + pageSize + ")&#39;><span>尾页</span></a> ";
    }
    return strPage+"</div>";
}

<div class="paging">
            <div id="dvPager" class="page fr clearfix" style="margin: 10px 0 15px;"></div>
        </div>


 a{color:#000;text-decoration:none;}
  .clearfix:after {clear: both;content: ".";display: block;font-size: 0;height: 0;line-height: 0;visibility: hidden;}
  .fr{float:none;}
  .page a{padding:6px 12px;border:1px solid #ddd;float:left;margin-left:-1px;color:#006dae;text-align:center;}
  .page a:hover{background:#ddd;}
  .page a.current{background:#006dae;color:#fff;border:1px solid #006dae;cursor: default;}
  .page .first{margin-right:10px;}
  .pageinfo{margin-left:10px;padding:6px 12px;border:1px solid #ddd;float:left;color:#006dae;text-align:center;}


下面是调用示例 ↓
function loadData(pageIndex,pageSize){
      $.ajax({
            contentType:"application/json;charset=utf-8", 
              url:&#39;?pageNum=&#39;+pageIndex+&#39;&pageSize=&#39;+pageSize,
              type:"POST",
              dataType:"json",
              success:function(result){
                if(null != result){
                 
                    )
                    var beginIndex = (pageIndex - 1) * pageSize;
                    var endIndex = pageIndex * pageSize - 1;
                    var pageCount = parseInt((result.totalRecords / pageSize)) + (result.totalRecords % pageSize ? 1 : 0);
                    $(&#39;#dvPager&#39;).html(pager(pageSize, pageIndex, pageCount, &#39;loadData&#39;));
            }
    });
 } 

说明:
pager(pageSize, pageIndex, pageCount, &#39;XXX&#39;)该方法 最后传入的参数XXX 是调用js方法的名称
Copy after login

The above is the detailed content of A very easy-to-use front-end paging js tool class. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template