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

分享自己封装的前端分页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方法的名称