Heim > Artikel > Web-Frontend > Eine sehr benutzerfreundliche Front-End-Paging-JS-Toolklasse
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='fr'><span class='pageinfo'>第 <font color='#FF0000'>" + pageIndex + "/" + pageCount + "</font> 页 每页 <font color='#FF0000'>" + pageSize + "</font> 条</span>"; if (pageIndex > 1) { strPage = strPage + "<a class='pageNav' onclick='" + url + "(1," + pageSize + ")'><span>首页</span></a> "; strPage = strPage + "<a class='pageNav' onclick='" + url + "(" + (pageIndex - 1) + "," + pageSize + ")'><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='current' href='javascript:void(0);'>" + i + "</a> "; } else { strPage = strPage + " <a class='pageNav' onclick='" + url + "(" + i + "," + pageSize + ")' title='第" + i + "页'>" + i + "</a> "; } } } } if (pageIndex < pageCount) { strPage = strPage + "<a class='pageNav' onclick='" + url + "(" + (pageIndex + 1) + "," + pageSize + ")'><span>下一页</span></a> "; strPage = strPage + "<a class='pageNav' onclick='" + url + "(" + pageCount + "," + pageSize + ")'><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:'?pageNum='+pageIndex+'&pageSize='+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); $('#dvPager').html(pager(pageSize, pageIndex, pageCount, 'loadData')); } }); } 说明: pager(pageSize, pageIndex, pageCount, 'XXX')该方法 最后传入的参数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!