一个非常好用的前端分页js工具类

一个新手
풀어 주다: 2017-09-29 09:43:26
원래의
1791명이 탐색했습니다.

分享自己封装的前端分页js工具类 下面是默认样式效果截图

可以随意更改js及css 很灵活

/** * 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 = "
" + pageIndex + "/" + pageCount + " 页 每页 " + pageSize + ""; if (pageIndex > 1) { strPage = strPage + "首页 "; strPage = strPage + "上一页 "; } 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 + " " + i + " "; } else { strPage = strPage + " " + i + " "; } } } } if (pageIndex < pageCount) { strPage = strPage + "下一页 "; strPage = strPage + "尾页 "; } return strPage+"
"; }
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方法的名称
로그인 후 복사

위 내용은 一个非常好用的前端分页js工具类 의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!