Heim  >  Artikel  >  Web-Frontend  >  Eine sehr benutzerfreundliche Front-End-Paging-JS-Toolklasse

Eine sehr benutzerfreundliche Front-End-Paging-JS-Toolklasse

一个新手
一个新手Original
2017-09-29 09:43:261866Durchsuche

Teilen Sie Ihre eigene gekapselte Front-End-Paging-Tool-Klasse.

Sie können JS und CSS nach Belieben ändern.

/**
* 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方法的名称

Das obige ist der detaillierte Inhalt vonEine sehr benutzerfreundliche Front-End-Paging-JS-Toolklasse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn